Buttons are one of the most essential building blocks of any front-end application. Whether you’re creating a call-to-action, navigation elements, or form submissions, having versatile and clean button code snippets at your fingertips can save you time and effort.

In this post, I’ve compiled a comprehensive set of button codes that are ready to use in your projects. The best part? You can easily copy each code snippet with a single click and paste it directly into your application. From basic buttons to advanced styles like hover effects, gradients, and animations, this guide covers it all.

Let’s streamline your workflow and make your front-end development process smoother!

Table of Contents

All Buttons with code: 76

Flat Button 1 Flat Button 2 FLAT BUTTON 3 Flat Button 4 Flat Button 5 Flat Button 6 Flat Button 7 Flat Button 8 Flat Button 9 FLAT BUTTON 9A FLAT BUTTON 9B FLAT BUTTON 9C Flat Button 10 Flat Button 11 FLAT BUTTON 12 FLAT BUTTON 13 FLAT BUTTON 14 FLAT BUTTON 15 FLAT BUTTON 16 FLAT BUTTON 17 FLAT BUTTON 18 FLAT BUTTON 19 Flat Button 20 Line Button Sample 1 Line Button Sample 2 Line Button Sample 3 Line Button Sample 4

Line Button Sample 5

Bootstrap Style Buttons

Primary Secondary Success Danger Warning Info Light Dark Outline Gradient

Bootstrap Style Button Primary

Primary

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-primary">Primary</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Primary Button */
.bootstrap-btn-primary {
    background-color: #007bff;
    color: #fff;
}
.bootstrap-btn-primary:hover {
    background-color: #0056b3;
}

Bootstrap Style Button Secondary

Secondary

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-secondary">Secondary</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Secondary Button */
.bootstrap-btn-secondary {
    background-color: #6c757d;
    color: #fff;
}
.bootstrap-btn-secondary:hover {
    background-color: #565e64;
}

Bootstrap Style Button Success

Success

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-success">Success</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Success Button */
.bootstrap-btn-success {
    background-color: #28a745;
    color: #fff;
}
.bootstrap-btn-success:hover {
    background-color: #218838;
}

Bootstrap Style Button Danger

Danger

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-danger">Danger</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Danger Button */
.bootstrap-btn-danger {
    background-color: #dc3545;
    color: #fff;
}
.bootstrap-btn-danger:hover {
    background-color: #c82333;
}

Bootstrap Style Button Warning

Warning

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-warning">Warning</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Warning Button */
.bootstrap-btn-warning {
    background-color: #ffc107;
    color: #212529;
}
.bootstrap-btn-warning:hover {
    background-color: #e0a800;
}

Bootstrap Style Button Info

Info

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-info">Info</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Info Button */
.bootstrap-btn-info {
    background-color: #17a2b8;
    color: #fff;
}
.bootstrap-btn-info:hover {
    background-color: #117a8b;
}

Bootstrap Style Button Light

Light

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-light">Light</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light Button */
.bootstrap-btn-light {
    background-color: #f8f9fa;
    color: #212529;
}
.bootstrap-btn-light:hover {
    background-color: #e2e6ea;
}

Bootstrap Style Button Dark

Dark

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-dark">Dark</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Button */
.bootstrap-btn-dark {
    background-color: #343a40;
    color: #fff;
}
.bootstrap-btn-dark:hover {
    background-color: #1d2124;
}

Bootstrap Style Button Outline

Outline

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-outline">Outline</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Outline Button */
.bootstrap-btn-outline {
    background-color: transparent;
    color: #007bff;
    border: 2px solid #007bff;
}
.bootstrap-btn-outline:hover {
    background-color: #007bff;
    color: #fff;
}

Bootstrap Style Button Gradient

Gradient

HTML:

<a href="#" class="bootstrap-btn bootstrap-btn-gradient">Gradient</a>

CSS:

/* Base Button Styles */
.bootstrap-btn {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Gradient Button */
.bootstrap-btn-gradient {
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    color: #fff;
    border: none;
}
.bootstrap-btn-gradient:hover {
    background: linear-gradient(45deg, #4e0ba9, #1b5dcd);
}

Flat Design Button: 23

Flat Design Button Sample 1

Flat Button 1

HTML:

<a href="#" class="flat-design-button-sample1">Flat Button Sample 1</a>

CSS:

.flat-design-button-sample1 {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    background-color: #007bff;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.flat-design-button-sample1:hover {
    background-color: #0056b3;
    color:#fff;
}

Flat Design Button Sample 2

Flat Button 2

HTML:

<a href="#" class="flat-design-button2-hover-link">Flat Design Button 2</a>

CSS:

.flat-design-button2-hover-link{
  position: relative;
  display: inline-block;
  padding: 1.2em 2.8em;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #fff !important;
  background-color: #007BFF;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s ease-in-out;
}

.flat-design-button2-hover-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease-in-out;
}

.flat-design-button2-hover-link:hover {
  background-color: #0056b3;
}

.flat-design-button2-hover-link:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.flat-design-button2-hover-link:active {
  transform: scale(0.95);
}

Flat Design Button Sample 3

FLAT BUTTON 3

HTML:

<a href="#" class="flat-design-button3-shimmer">FLAT BUTTON 3</a>

CSS:

.flat-design-button3-shimmer {
  display: inline-block;
   padding: 1.2em 2.8em;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  text-align:center;
  background: linear-gradient(90deg, #007BFF, #0056b3);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.flat-design-button3-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
  transition: all 0.5s ease;
  transform: skewX(-25deg);
}

.flat-design-button3-shimmer:hover::before {
  left: 100%;
}

Flat Design Button Sample 4

Flat Button 4

HTML:

<a class="flat_btn04_AB">
<span>Flat Button 4</span>
</a>

CSS:

.flat_btn04_AB{
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2em 2.8em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color:white;
  background-color: #ee5519;
}

.flat_btn04_AB span{
 position: relative;
}

.flat_btn04_AB:before{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height:100%;
  width: 100%;
  background-color:#00000042;
  clip-path: polygon(100% 0, 150% 0, 100% 100%, 100% 100%);
  transition: clip-path .35s cubic-bezier(.21, .6, .35, 1)
}

.flat_btn04_AB:hover:before{
  clip-path: polygon(100% 0, 0 0, -50% 100%, 100% 100%);
}

Flat Design Button Sample 5

Flat Button 5

HTML:

<a class="flat_btn5_AB">Flat Button 5</a>

CSS:

.flat_btn5_AB{
  display: inline-block;
  padding: 1.2em 2.8em;
  background-color: lightgreen;
  border: 3px solid transparent;
  border-radius: 5px;
  color: darkgreen;
  font-family: "Montserrat", sans-serif; 
  font-size: 1.5rem; 
  font-weight: 700; 
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: border 0.5s ease;
}

.flat_btn5_AB:hover{
  border: 3px solid green;
  opacity: 0.8;
}

Flat Design Button Sample 6

Flat Button 6

HTML:

<a class="flat_btn6_AB">Flat Button 6</a>

CSS:

.flat_btn6_AB{
  display: inline-block;
  padding: 1.2em 2.8em;
  background-color: #745fd4;
  border: 3px solid purple;
  border-radius: 5px;
  color: white;
  font-family: "Montserrat", sans-serif; 
  font-size: 1.5rem; 
  font-weight: 700; 
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.5s ease;
  top: 0;
  position: relative;
}

.flat_btn6_AB:hover{
  top: -4px;
  box-shadow: 0px 0px 10px white inset;
}

Flat Design Button Sample 7

Flat Button 7

HTML:

<a class="flat_btn7_AB">Flat Button 7</a>

CSS:

.flat_btn7_AB {
  display: inline-block;
  font-family: "Montserrat", sans-serif; 
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 3px;
}

.flat_btn7_AB span{
  background-color: rgb(5, 6, 45);
  border-radius: 8px;
  padding: 1.2em 2.8em;
  display: block;
  transition: background 0.5s ease;
}

.flat_btn7_AB:hover span{
  background: none;
}

Flat Design Button Sample 8

Flat Button 8

HTML:

<a class="flat_btn8_AB" role="button">Flat Button 8</a>

CSS:

.flat_btn8_AB {
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif; 
  font-size: 1.5rem; 
  font-weight: 700; 
  line-height: 1
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  align-items: center;
  padding: 1.2em 2.8em;
  color: #fff;
  cursor: pointer;
  background-color: rgba(249, 58, 19, .32);
  border-radius: 8px;
  z-index: 0;
  border: none;
  
}

.flat_btn8_AB:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  display: block;
  background: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
  border-radius: 8px;
  overflow: hidden; 
  transition: all 100ms ease-out;
  z-index: -1;
}

.flat_btn8_AB:hover:not(:disabled):after {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-timing-function: ease-in;
}

.flat_btn8_AB:active:not(:disabled) {
  color: #ccc;
}

.flat_btn8_AB:active:not(:disabled):after {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), 
  linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
  bottom: 4px;
  left: 4px;
  right: 4px;
  top: 4px;
}

.flat_btn8_AB:disabled {
  cursor: default;
  opacity: .24;
}

Flat Design Button Sample 9

Flat Button 9

HTML:

<a href="#" class="flat_btn9_AB">Flat Button 9</a>

CSS:

.flat_btn9_AB {
   position: relative;
   display: inline-block;
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   color: white;
   background-color: #6200ea;
   border: none;
   border-radius: 5px;
   overflow: hidden;
   text-decoration: none;
   text-align: center;
   text-transform: uppercase;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.flat_btn9_AB:hover {
    background-color: #4820a1;
}

.flat_btn9_AB::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: scale(1);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.flat_btn9_AB:hover::after {
    transform: scale(20);
    opacity: 0.1;
}

Flat Design Button Sample 9A

FLAT BUTTON 9A

HTML:

<a href="#" class="wave_flat_button9A">FLAT BUTTON 9A</a>

CSS:

 .wave_flat_button9A {
    display: inline-block;  
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    background: #3498db;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }

  .wave_flat_button9A::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
  }

  .wave_flat_button9A:hover::before {
    transform: translate(-50%, -50%) scale(1);
  }

Flat Design Button Sample 9B

FLAT BUTTON 9B

HTML:

<a href="#" class="flat_button9b_AB">FLAT BUTTON 9B</a>

CSS:

 .flat_button9b_AB {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    background: #34495e;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }

  .flat_button9b_AB::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
  }

  .flat_button9b_AB:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

Flat Design Button Sample 9C

FLAT BUTTON 9C

HTML:

<a href="#" class="flat_button9c_AB">FLAT BUTTON 9C</a>

CSS:

.flat_button9c_AB {
    display: inline-block;   
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    background: #16a085;
    border: none;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.flat_button9c_AB:hover {
    transform: scale(1.05);
}

.flat_button9c_AB::before,
.flat_button9c_AB::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.flat_button9c_AB:hover::before {
    width: 200px;
    height: 200px;
}

.flat_button9c_AB:hover::after {
    width: 300px;
    height: 300px;
}

Flat Design Button Sample 10

Flat Button 10

HTML:

<a href="#" class="flat_btn10_AB">Flat Button 10</a>

CSS:

.flat_btn10_AB {
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding:1.2em 2.8em;
  line-height: 1;
  text-align: center;
  text-decoration: none!important;
  color: #fff!important;
  text-transform: uppercase;
  background: #ff007a;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  transition: background-color 0.4s ease;
}

.flat_btn10_AB::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: white;
  opacity: 0.5;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.flat_btn10_AB:hover::after {
  transform: translate(-50%, -50%) scale(15);
  opacity: 0;
}

Flat Design Button Sample 11

Flat Button 11

HTML:

<a href="#" class="neon-border-button11">Flat Button 11</a>

CSS:

 .neon-border-button11 {
   display: inline-block;  
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   color: #fff;
   background: #000;
   border: 2px solid transparent;
   border-radius: 5px;
   text-decoration: none;
   text-align: center;
   transition: border 0.4s ease, box-shadow 0.4s ease;
}

.neon-border-button11:hover {
   border: 2px solid #00e5ff;
   box-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff;
}

Flat Design Button Sample 12

FLAT BUTTON 12

HTML:

<a href="#" class="morph_flat_button12">FLAT BUTTON 12</a>

CSS:

   .morph_flat_button12 {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    background: #ff7043;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: border-radius 0.5s ease, transform 0.5s ease;
  }

  .morph_flat_button12:hover {
    border-radius: 50px;
    transform: scale(1.1);
  }

Flat Design Button Sample 13

FLAT BUTTON 13

HTML:

<a href="#" class="liquid_flat_button13">FLAT BUTTON 13</a>

CSS:

 .liquid_flat_button13 {
    display: inline-block;
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    background: #673ab7;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    position: relative;
  }

  .liquid_flat_button13::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transition: left 0.4s ease;
  }

  .liquid_flat_button13:hover::before {
    left: 0;
  }

Flat Design Button Sample 14

FLAT BUTTON 14

HTML:

<a href="#" class="circle_burst_flat_button14">FLAT BUTTON 14</a>

CSS:

.circle_burst_flat_button14 {
   display: inline-block; 
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   color: #fff;
   background: #c0392b;
   text-align: center;
   text-decoration: none;
   border-radius: 5px;
   position: relative;
   overflow: hidden;
   transition: box-shadow 0.3s ease;
}

.circle_burst_flat_button14::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 10px;
   height: 10px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   transform: translate(-50%, -50%) scale(0);
   transition: transform 0.4s ease;
}

.circle_burst_flat_button14:hover::after {
   transform: translate(-50%, -50%) scale(10);
   opacity: 0;
}

.circle_burst_flat_button14:hover {
   box-shadow: 0 0 20px rgba(192, 57, 43, 0.5);
}

Flat Design Button Sample 15

FLAT BUTTON 15

HTML:

<a href="#" class="elastic-bounce-flat-button15">FLAT BUTTON 15</a>

CSS:

.elastic-bounce-flat-button15 {
   display: inline-block; 
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
   color: #fff;
   background: #f39c12;
   text-decoration: none;
   border-radius: 8px;
   transition: transform 0.2s ease-out;
}

.elastic-bounce-flat-button15:hover {
   transform: scale(1.05) rotate(-3deg);
}

Flat Design Button Sample 16

FLAT BUTTON 16

HTML:

<a href="#" class="spotlight-button16">FLAT BUTTON 16</a>

CSS:

.spotlight-button16 {
   display: inline-block;
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   color: #fff;
   background: #2980b9;
   text-align: center;
   text-decoration: none;
   border-radius: 8px;
   position: relative;
   overflow: hidden;
}

.spotlight-button16::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent);
   transform: translate(-50%, -50%);
   pointer-events: none;
}

.spotlight-button16:hover::before {
   animation: spotlight-move 1.5s infinite;
  }

@keyframes spotlight-move {
   0%, 100% {
     transform: translate(0, 0);
   }
   50% {
     transform: translate(100%, 100%);
   }
}

Flat Design Button Sample 17

FLAT BUTTON 17

HTML:

<a href="#" class="glow-trail-flat-button17">FLAT BUTTON 17</a>

CSS:

.glow-trail-flat-button17 {
   display: inline-block;    
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   color: #fff;
   background: #2ecc71;
   border: none;
   border-radius: 8px;
   text-decoration: none;
   text-align: center;
   overflow: hidden;
   position: relative;
   transition: box-shadow 0.3s ease;
}

.glow-trail-flat-button17::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 200%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
   transition: left 0.4s ease;
}

.glow-trail-flat-button17:hover::before {
   left: 0;
}

.glow-trail-flat-button17:hover {
   box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
 }

Flat Design Button Sample 18

FLAT BUTTON 18

HTML:

<a href="#" class="particle-flat-button18">FLAT BUTTON 18</a>

CSS:

.particle-flat-button18 {
   display: inline-block;
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   color: #fff;
   background: #2c3e50;
   text-decoration: none;
   text-align: center;
   border-radius: 8px;
   position: relative;
   overflow: hidden;
   transition: box-shadow 0.3s ease;
}

.particle-flat-button18:hover {
   box-shadow: 0 0 15px rgba(44, 62, 80, 0.5);
}

.particle-flat-button18::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50px;
   height: 50px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   animation: float 2s infinite ease-in-out;
}

@keyframes float {
   0% {
     transform: translate(-50%, -50%) scale(1);
   }
   50% {
     transform: translate(-50%, -60%) scale(1.2);
   }
   100% {
     transform: translate(-50%, -50%) scale(1);
   }
}

Flat Design Button Sample 19

FLAT BUTTON 19

HTML:

<a href="#" class="shimmer-swipe-flat-button19">FLAT BUTTON 19</a>

CSS:

 .shimmer-swipe-flat-button19 {
    display: inline-block;   
    padding: 1.2em 2.8em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    background: #16a085;
    text-decoration: none;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }

  .shimmer-swipe-flat-button19::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
  }

  .shimmer-swipe-flat-button19:hover::before {
    left: 100%;
  }

Flat Design Button Sample 20

Flat Button 20

HTML:

<a href="#" class="flat_btn20_AB">Flat Button 20</a>

CSS:

.flat_btn20_AB {
  cursor: pointer;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 1.2em 2.8em;
  color: #fff;
  background: #644dff;
  border: 2px solid #4836bb;
  border-radius: .75rem;
  box-shadow: 0 8px 0 #4836bb;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transform: skew(-10deg);
  transition: all .3s ease;
  filter: drop-shadow(0 15px 20px #654dff63);
}

.flat_btn20_AB:hover{
  transform: skew(10deg);
}
.flat_btn20_AB:active {
  letter-spacing: 0px;
  transform: skew(10deg) translateY(8px);
  box-shadow: 0 0 0 #654dff63;
}

Line Button: 8

Line Button Sample 1 Line Button Sample 2 Line Button Sample 3 Line Button Sample 4

Line Button Sample 5

Line Button Sample 6 Line Button Sample 7 Line Button Sample 7 A

Line Button Sample 1

HTML:

<a href="#" class="line_btn_first">Line Button Sample 1</a>

CSS:

.line_btn_first {
  width:max-content;
  text-decoration:none !important;
  box-sizing: border-box;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.line_btn_first:hover, .line_btn_first:focus {
  color: #fff;
  outline: 0;
  box-shadow: 0 0 40px 40px #e74c3c inset;
}

Line Button Sample 2

HTML:

<a class="line_btn_second">Line Button Sample 2</a>

CSS:

.line_btn_second {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 1.2em 2.8em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  color: #0bf4f3;
  border: 1px solid #0bf4f3;
  box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}

.line_btn_second:hover {
  box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}

Line Button Sample 3

HTML:

<a class="line_btn_third">Line Button Sample 3</a>

CSS:

.line_btn_third {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 1.2em 2.8em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  color: #8ce436;
  border: 1px solid #8ce436;
  box-shadow: 0 0 5px #8ce436, 0 0 5px inset;
}

.line_btn_third:after {
  position: absolute;
  content: "";
  top: 7%;
  bottom: 7%;
  left: 2%;
  right:2%;
  border: 1px solid #8ce436;
  box-shadow: 0 0 5px #8ce436 inset;
  opacity: 0;
  transition: all 0.3s ease;
}
.line_btn_third:hover:after {
  opacity: 1;
}

Line Button Sample 4

HTML:

<a class="Simple_line_btn4_AB">Line Button Sample 4</a>

CSS:

.Simple_line_btn4_AB {
  position: relative;
  display:inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding:1.2em 2.8em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.5s, transform 0.2s, background-color 0.2s;
  background-color: transparent;
  color: #c45ef7;
  outline: none;
  border-radius: 3px;
  border: 3px solid transparent;
}
.Simple_line_btn4_AB:active {
  transform: translateY(3px);
}
.Simple_line_btn4_AB::after, .Simple_line_btn4_AB::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.Simple_line_btn4_AB:hover {
  background-color: transparent;
  box-shadow: none;
  color: #a407f5;
}
.Simple_line_btn4_AB::before {
  border: 3px solid #c45ef7;
}
.Simple_line_btn4_AB:hover::before {
  opacity: 0;
}
.Simple_line_btn4_AB::after {
  background-color: transparent;
  border: 3px solid #a407f5;
  opacity: 0;
  z-index: -1;
  transform: scaleX(1.1) scaleY(1.2);
}
.Simple_line_btn4_AB:hover::after {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}

Line Button Sample 5

HTML:

<a class="line_btn5_AB">
<span><p>Line Button 5</p></span>
</a>

CSS:

.line_btn5_AB {
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 #0000,  0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  color: black;
  overflow: hidden;
  transition: all 0.5s ease;
  cursor: pointer;
  border: 0;
  border-radius: 3px;
}

.line_btn5_AB:before, .line_btn5_AB:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #44d8a4;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}


.line_btn5_AB:before {
  right: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.line_btn5_AB:after {
  left: 0;
  bottom: 0;
}

.line_btn5_AB span {
  padding: 1.2em 2.8em;
  display: block;
  transition: all 0.5s ease;
}

.line_btn5_AB span:before, .line_btn5_AB span:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0;
  background-color: #44d8a4;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.line_btn5_AB span:before {
  right: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.line_btn5_AB span:after {
  left: 0;
  bottom: 0;
}

.line_btn5_AB span p{
  margin: 0;
  transition: all 0.5s ease;
}

.line_btn5_AB:hover span p{
  transform: rotateY(40deg);
  text-shadow: 0px 10px 5px #a9a9a9;
}

.line_btn5_AB:hover:before, .line_btn5_AB:hover:after {
  width: 100%;
}

.line_btn5_AB:hover span:before, .line_btn5_AB:hover span:after {
  height: 100%;
}

Line Button Sample 6

HTML:

<a class="line_btn6_AB" href="#">
<span class="top-key"></span>
<span class="text">Line Button Sample 6</span>
<span class="bottom-key-1"></span>
<span class="bottom-key-2"></span>
</a>

CSS:

.line_btn6_AB {
  font-family: "Montserrat", sans-serif;
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 0;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 1.2em 2.8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 1.5rem;
}

.line_btn6_AB::before {
  content: " ";
  width: 1.5625rem;
  height: 2px;
  background: black;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}

.line_btn6_AB .text {
  transition: all 0.3s ease;
  padding-left: 2em;
  display: block;
  
}

.line_btn6_AB .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.line_btn6_AB .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.line_btn6_AB .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.line_btn6_AB:hover {
  color: white;
  background: black;
}

.line_btn6_AB:hover::before {
  width: 0.9375rem;
  background: white;
}

.line_btn6_AB:hover .text {
  padding-left: 1.5em;
}

.line_btn6_AB:hover .top-key {
  left: -2px;
  width: 0px;
}

.line_btn6_AB:hover .bottom-key-1,
 .line_btn6_AB:hover .bottom-key-2 {
  right: 0;
  width: 0;
}

Line Button Sample 7

HTML:

<a href="#" class="line_btn7_AB"><span>Line Button Sample 7</span></a>

CSS:

.line_btn7_AB {
/* text color and background color must be in contrast (opposite) and bg-color must be match with the parent div background color */
  --text-border-color: black;
  --bg-color: white;
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 1.2em 2.8em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 2px solid var(--text-border-color);
  color: var(--text-border-color);
}

.line_btn7_AB::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 12px);
  background-color: var(--bg-color);
  transition: 0.3s ease-in-out;
  transform: scaleY(1);
}

.line_btn7_AB:hover::before {
  transform: scaleY(0);
}

.line_btn7_AB::after {
  content: '';
  position: absolute;
  left: 6px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% - 12px);
  background-color: var(--bg-color);
  transition: 0.3s ease-in-out;
  transform: scaleX(1);
  transition-delay: 0.5s;
  
}

.line_btn7_AB:hover::after {
  transform: scaleX(0);
}

.line_btn7_AB span {
  position: relative;
  z-index: 3;
}

Line Button Sample 7A

Line Button Sample 7 A

HTML:

<a href="#" class="line_btn7A_AB"><span>Line Button Sample 7 A</span></a>

CSS:

.line_btn7A_AB {
  /* text color and background color must be in contrast (opposite) and bg-color must be match with its parent div background color */
  --text-border-color:black;
  --bg-color:white;
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 1.2em 2.8em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 2px solid var(--text-border-color);
  color: var(--text-border-color);
  transition: 0.3s;
}

.line_btn7A_AB::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - -2px);
  background-color: var(--bg-color);
  transition: 0.3s ease-out;
  transform: scaleY(1);
}

.line_btn7A_AB::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 50px);
  background-color: var(--bg-color);
  transition: 0.3s ease-out;
  transform: scaleY(1);
}

.line_btn7A_AB:hover::before {
  transform: translateY(-25px);
  height: 0;
}

.line_btn7A_AB:hover::after {
  transform: scaleX(0);
  transition-delay: 0.15s;
}

.line_btn7A_AB:hover {
  border: 2px solid var(--text-border-color);
}

.line_btn7A_AB span {
  position: relative;
  z-index: 3;
}

Animated Button: 37

Simple Animated Button Sample 1

SIMPLE ANIMATED BUTTON 1

HTML:

<div class="animatedbtn"><button class="btn01_sk">SIMPLE ANIMATED BUTTON 1</button></div>

CSS:

.animatedbtn button,
.animatedbtn button::after {
	transition: all 0.3s;
}

.animatedbtn button {
	background: none;
	border: 2px solid #007bff;
	color: #007bff;
	font-family: "Montserrat", sans-serif;
	font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
	padding: 1.2em 2.8em;
	position: relative;
	margin: 5px;
	cursor: pointer;
}

.animatedbtn button::after {
	background: #007bff;
	content: "";
	position: absolute;
	z-index: -1;
}

.animatedbtn button:hover {
	color: #fff;
	border-color:#007bff;
	background-color: #007bff;
}

/* Button01 */
.btn01_sk::after {
	height: 100%;
	left: 0;
	top: 0;
	width: 0;
}

.btn01_sk:hover::after {
	width: 100%;
}

Simple Animated Button Sample 2

SIMPLE ANIMATED BUTTON 2

HTML:

<div class="animatedbtn"><button class="btn02_sk">SIMPLE ANIMATED BUTTON 2</button></div>

CSS:

.animatedbtn button,
.animatedbtn button::after {
	transition: all 0.3s;
}

.animatedbtn button {
	background: none;
	border: 2px solid #007bff;
	color: #007bff;
	font-family: "Montserrat", sans-serif;
	font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
	padding: 1.2em 2.8em;
	position: relative;
	margin: 5px;
	cursor: pointer;
}

.animatedbtn button::after {
	background: #007bff;
	content: "";
	position: absolute;
	z-index: -1;
}

.animatedbtn button:hover {
	color: #fff;
	border-color:#007bff;
	background-color: #007bff;
}

/* Button02 */
.btn02_sk::after {
	height: 0;
	left: 0;
	top: 0;
	width: 100%;
}

.btn02_sk:hover:after {
	height: 100%;
}

Simple Animated Button Sample 2A

SIMPLE ANIMATED BUTTON 2A

HTML:

<div class="animatedbtn"><button class="btn02a_sk">SIMPLE ANIMATED BUTTON 2A</button></div>

CSS:

.animatedbtn button,
.animatedbtn button::after {
	transition: all 0.3s;
}

.animatedbtn button {
	background: none;
	border: 2px solid #007bff;
	color: #007bff;
	font-family: "Montserrat", sans-serif;
	font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        text-align:center;
	padding: 1.2em 2.8em;
	position: relative;
	margin: 5px;
	cursor: pointer;
}

.animatedbtn button::after {
	background: #007bff;
	content: "";
	position: absolute;
	z-index: -1;
}

.animatedbtn button:hover {
	color: #fff;
	border-color:#007bff;
	background-color: #007bff;
}

/* Button03 */
.btn02a_sk::after {
	height: 0;
	left: 0;
	top: 0;
	width: 0%;
}

.btn02a_sk:hover:after {
	height: 100%;
	width: 100%;
}

Simple Animated Button Sample 2B

SIMPLE ANIMATED BUTTON 2B

HTML:

<div class="animatedbtn"><button class="btn02a_sk">Simple Animated Button 2B</button></div>

CSS:

.animatedbtn button,
.animatedbtn button::after {
	transition: all 0.3s;
}

.animatedbtn button {
	background: none;
	border: 2px solid #007bff;
	color: #007bff;
	font-family: "Montserrat", sans-serif;
	font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        text-align:center;
	padding: 1.2em 2.8em;
	position: relative;
	margin: 5px;
	cursor: pointer;
}

.animatedbtn button::after {
	background: #007bff;
	content: "";
	position: absolute;
	z-index: -1;
}

.animatedbtn button:hover {
	color: #fff;
	border-color:#007bff;
	background-color: #007bff;
}

/* Button04 */
.btn02a_sk::after {
	height: 0;
	left: 0;
	top: 50%;
	width: 100%;
}

.btn02a_sk:hover:after {
	height: 100%;
	width: 100%;
	top: 0;
}

Simple Animated Button Sample 2C

Simple Animated Button 2C

HTML:

<a class="animatedbtn2C_AB">Simple Animated Button 2C</a>

CSS:

.animatedbtn2C_AB {
  color: #007bff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 1.2em 2.8em;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  border: 2px solid #007bff;
  overflow: hidden;
}

.animatedbtn2C_AB:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #007bff;
  transition: all 0.3s ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.animatedbtn2C_AB:hover {
  color: #fff;
}
.animatedbtn2C_AB:hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

Simple Animated Button Sample 3

Simple Animated Button 3

HTML:

<a class="animatedbtn_btn03_sk">Simple Animated Button 3</a>

CSS:

.animatedbtn_btn03_sk {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 1.2em 2.8em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  color: #fff;
  background: #00aced;
   box-shadow:  0 0 5px #00aced,  0 0 8px #00aced;
  border: none;
  z-index: 2;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.animatedbtn_btn03_sk:hover{
  background-color: transparent;
  color: #00aced;
  box-shadow: 0 5px 3px -3px #00aced, 0 -5px 3px -3px #00aced,
    0 5px 3px -3px #00aced, 0 -5px 3px -3px #00aced;
}
.animatedbtn_btn03_sk:before,
.animatedbtn_btn03_sk:after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  height: 50%;
  right: 0;
  z-index: -1;
  background: #00aced;
  box-shadow: 0 0 5px #00aced;
  transition: all 0.3s ease;
}
.animatedbtn_btn03_sk:before {
  top: 0;
}
.animatedbtn_btn03_sk:after {
  bottom: 0;
}
.animatedbtn_btn03_sk:hover:before,
.animatedbtn_btn03_sk:hover:after {
  height: 0;
  background-color: #00aced;
}

Simple Animated Button Sample 4

Simple Animated Button 4

HTML:

<a class="animatedbtn_btn04_sk">Simple Animated Button 4</a>

CSS:

.animatedbtn_btn04_sk {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 1.2em 2.8em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  color: #fff;
  background: #21ebff;
  border: none;
	transition: all 0.3s linear;
  
}

.animatedbtn_btn04_sk:hover{
  background: transparent;
  color: #21ebff;
}
.animatedbtn_btn04_sk:before,
.animatedbtn_btn04_sk:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  background: #21ebff;
  width:0;
    box-shadow:  0 0 5px #21ebff,  0 0 5px #21ebff inset;
  transition:400ms ease all;
}
.animatedbtn_btn04_sk:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.animatedbtn_btn04_sk:hover:before,
.animatedbtn_btn04_sk:hover:after{
  width:100%;
  transition:800ms ease all;
}

Simple Animated Button Sample 5

Simple Animated Button 5

HTML:

<a class="animatedbtn_btn05_sk"><span>Simple Animated Button 5</span></a>

CSS:

.animatedbtn_btn05_sk {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  display: inline-block;
  color: #fff;
  background: #8ce436;
  box-shadow: 0 0 5px #8ce436;
  border: none;
	transition: all 0.3s linear;
  
}
.animatedbtn_btn05_sk span {
  position: relative;
  display: block;
  padding: 1.2em 2.8em;
}
.animatedbtn_btn05_sk:hover{
  background: transparent;
  color: #8ce436;
}
.animatedbtn_btn05_sk:before,
.animatedbtn_btn05_sk:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  background: #8ce436;
 box-shadow: 0 0 5px #8ce436;
}
.animatedbtn_btn05_sk:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.animatedbtn_btn05_sk:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.animatedbtn_btn05_sk:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.animatedbtn_btn05_sk:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.animatedbtn_btn05_sk span:before,
.animatedbtn_btn05_sk span:after {
  position: absolute;
  content: "";
  background: #8ce436;
  box-shadow: 0 0 5px #8ce436;
}
.animatedbtn_btn05_sk span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.animatedbtn_btn05_sk span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.animatedbtn_btn05_sk:hover span:before {
  width: 100%;
}
.animatedbtn_btn05_sk:hover span:after {
  width: 100%;
}

Simple Animated Button Sample 6

Simple Animated Button 6

HTML:

<a class="animatedbtn_btn06_sk">Simple Animated Button 6</a>

CSS:

.animatedbtn_btn06_sk {
  border: 2px solid #f1c40f;
  color: #f1c40f;
  cursor: pointer;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  transition: all 400ms ease-in-out;
}
.animatedbtn_btn06_sk:hover, .animatedbtn_btn06_sk:focus {
  color: #fff;
  outline: 0;
  background-position: 0;
}

Simple Animated Button Sample 7

Simple Animated Button 7

HTML:

<a class="animatedbtn_btn07_sk">Simple Animated Button 7</a>

CSS:

.animatedbtn_btn07_sk {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 1.2em 2.8em;
  text-decoration:none !important;
  background-color: transparent;
  border: 2px solid #8e44ad;
  color: #8e44ad;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  transition: color 150ms ease-in-out;
}
.animatedbtn_btn07_sk:hover, .animatedbtn_btn07_sk:focus {
  color: #fff;
  outline: 0;
}

.animatedbtn_btn07_sk:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 100%;
  background: #8e44ad;
  z-index: -1;
  transition: width 150ms ease-in-out;
}

.animatedbtn_btn07_sk:hover:after {
  width: 110%;
}

Simple Animated Button Sample 8

Simple Animated Button 8

HTML:

<a class="animatedbtn_btn07_sk">Simple Animated Button 7</a>

CSS:

.animatedbtn_btn08_sk { 
  color: #6d52ff;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 1.2em 2.8em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 2px solid #6d52ff;
  box-shadow: 0 0 5px #6d52ff, 0 0 5px #6d52ff inset;
  z-index: 2;
  overflow: hidden;
}
.animatedbtn_btn08_sk:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.animatedbtn_btn08_sk:hover {
  color: #fff;
}
.animatedbtn_btn08_sk:hover:after {
  background: #6d52ff;
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  
}

Simple Animated Button Sample 9

HTML:

<a href="#" class="animated_btn_flip_AB" data-back="Animated Button 9 Back" data-front="Animated Button 9 Front"></a>

CSS:

.animated_btn_flip_AB{
    position: relative;
    display: inline-block;
    text-align: center;
    letter-spacing: 1px;
    text-decoration: none!important;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    transition: all 0.5s;
    font-size: 1.5rem;
    font-weight: 700;
}

.animated_btn_flip_AB:hover::after {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

.animated_btn_flip_AB:hover::before {
    opacity: 0;
    transform: translateY(50%) rotateX(90deg);
}

.animated_btn_flip_AB::after {
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    padding: 1.2em 2.8em;
    color: #fff;
    display: inline-block;
    transition: all 0.5s;
    position: absolute;
    background: rgba(34,193,195,1);
    content: attr(data-back);
    transform: translateY(-50%) rotateX(90deg);
}

.animated_btn_flip_AB::before {
    top: 0;
    left: 0;
    opacity: 1;
    color: #fff;
    display: block;
    padding: 1.2em 2.8em;
    transition: all 0.5s;
    position: relative;
    background: rgba(34,193,195,1);
    content: attr(data-front);
    transform: translateY(0) rotateX(0);
}

Simple Animated Button Sample 10

Simple Animated Button 10

HTML:

<a class="animatedbtn_double_swipe_AB_10" href="#">Simple Animated Button 10</a>

CSS:

.animatedbtn_double_swipe_AB_10 {
  display:inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position:relative;
  padding:1.2em 2.8em;
  color: #3dca79;
  border: 2px solid #10743a;
  text-align:center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  
}
.animatedbtn_double_swipe_AB_10:before, .animatedbtn_double_swipe_AB_10:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 90px solid #10743a;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.animatedbtn_double_swipe_AB_10:before {
  right: -50px;
  border-right: 50px solid transparent;
  transform: translateX(-100%);
  
}
.animatedbtn_double_swipe_AB_10:after {
  left: -50px;
  border-left: 50px solid transparent;
  transform: translateX(100%);
}
.animatedbtn_double_swipe_AB_10:hover {
  color: #c6f0d8;
}
.animatedbtn_double_swipe_AB_10:hover:before {
  transform: translateX(-40%);
}
.animatedbtn_double_swipe_AB_10:hover:after {
  transform: translateX(40%);
}

Simple Animated Button Sample 11

Simple Animated Button 11

HTML:

<a class="animation_diagonalClose_btn-AB_11" href="#">Simple Animated Button 11</a>

CSS:

.animation_diagonalClose_btn-AB_11 {
  display:inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position:relative;
  padding:1.2em 2.8em;
  color: #ad7441;
  border: 2px solid #ad7441;
  text-align:center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}
.animation_diagonalClose_btn-AB_11:before, .animation_diagonalClose_btn-AB_11:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.5s ease;
  z-index:-1;
}
.animation_diagonalClose_btn-AB_11:before {
  right: -50px;
  border-right: 50px solid transparent;
  border-bottom: 90px solid #5f3713;
  transform: translateX(-100%);
}
.animation_diagonalClose_btn-AB_11:after {
  left: -50px;
  border-left: 50px solid transparent;
  border-top: 90px solid #5f3713;
  transform: translateX(100%);
}
.animation_diagonalClose_btn-AB_11:hover {
  color: #e7d6c7;
}
.animation_diagonalClose_btn-AB_11:hover:before {
  transform: translateX(-49%);
}
.animation_diagonalClose_btn-AB_11:hover:after {
  transform: translateX(49%);
}

Simple Animated Button Sample 12

Simple Animated Button 12

HTML:

<a class="animation_zoningIn_btn-AB_12" href="#">Simple Animated Button 12</a>

CSS:

.animation_zoningIn_btn-AB_12 {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
  padding: 1.2em 2.8em;
  color: #126408cc;
  border: 2px solid #126408;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}

.animation_zoningIn_btn-AB_12:before,
.animation_zoningIn_btn-AB_12:after {
  content: "";
  position: absolute;
  top: 50%; /* Vertically centers the pseudo-elements */
  transform: translateY(-50%); /* Adjusts position to center */
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 50px solid #126408;
  border-bottom: 50px solid #126408;
  transition: all 0.5s ease;
  z-index: -1;
}

.animation_zoningIn_btn-AB_12:before {
  border-right: 40px solid transparent;
  transform: translate(-100%, -50%);
}

.animation_zoningIn_btn-AB_12:after {
  border-left: 40px solid transparent;
  transform: translate(100%, -50%);
}

.animation_zoningIn_btn-AB_12:hover {
  color: #c7e9c3;
}

.animation_zoningIn_btn-AB_12:hover:before {
  transform: translate(-30%, -50%);
}

.animation_zoningIn_btn-AB_12:hover:after {
  transform: translate(30%, -50%);
}

Simple Animated Button Sample 13

Simple Animated Button 13

HTML:

<a class="animation_4Cornersbtn_AB_13" href="#"><span>Simple Animated Button 13</span></a>

CSS:

.animation_4Cornersbtn_AB_13 {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
  padding:1.2em 2.8em;
  color: #323657;
  border: 2px solid #323657;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  
}

.animation_4Cornersbtn_AB_13:before, .animation_4Cornersbtn_AB_13:after,
.animation_4Cornersbtn_AB_13 span: before,
.animation_4Cornersbtn_AB_13 span: after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #080b22;
  transition: all 0.5s ease;
  z-index:-1;
}
.animation_4Cornersbtn_AB_13:before {
  transform: translate(-100%, -100%);
}
.animation_4Cornersbtn_AB_13:after {
  transform: translate(-100%, 100%);
}
.animation_4Cornersbtn_AB_13 span:before {
  transform: translate(100%, -100%);
}
.animation_4Cornersbtn_AB_13 span:after {
  transform: translate(100%, 100%);
}
.animation_4Cornersbtn_AB_13:hover {
  color: #c3c4ce;
}
.animation_4Cornersbtn_AB_13:hover:before {
  transform: translate(-49.5%, -49.5%);
}
.animation_4Cornersbtn_AB_13:hover:after {
  transform: translate(-49.5%, 49.5%);
}
.animation_4Cornersbtn_AB_13:hover span:before {
  transform: translate(50%, -50%);
}
.animation_4Cornersbtn_AB_13:hover span:after {
  transform: translate(50%, 50%);
}

Simple Animated Button Sample 14

Simple Animated Button 14

HTML:

<a class="animation_slicebtn_AB_14" href="#">Simple Animated Button 14</a>

CSS:

.animation_slicebtn_AB_14 {
  display:inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position:relative;
  padding:1.2em 2.8em;
  color: #a24ece;
  border: 2px solid #a24ece;
  text-align:center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  
}

.animation_slicebtn_AB_14:before, .animation_slicebtn_AB_14:after {
  content: "";
  position: absolute;
  width: 102%;
  height: 100%;
  border: 0 solid;
  background: #581c76;
  transition: all 0.5s ease;
  z-index: -1;
  
}

.animation_slicebtn_AB_14:after {
  border-color: transparent #581c76 transparent transparent;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  transform: translateX(100%);
  top: -100%;
  right: 0;
}
.animation_slicebtn_AB_14:before {
 transform: translateX(-100%);
  clip-path: polygon(100% 0, 0 100%, 0 0%);
  bottom: -100%;
  left: 0;
}


.animation_slicebtn_AB_14:hover {
  color: #e4cbf1;
}
.animation_slicebtn_AB_14:hover:before{
  bottom:0;
  transform: translateX(0%);
} .animation_slicebtn_AB_14:hover:after {
  transform: translateX(0%);
  top:0; 
}

Simple Animated Button Sample 15

Simple Animated Button 15

HTML:

<a class="animation_alternativebtn_AB_15" href="#"><span>Simple Animated Button 15</span></a>

CSS:

.animation_alternativebtn_AB_15 {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
  padding: 1.2em 2.8em;
  color: #a98c96;
  border: 2px solid #a98c96;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}

.animation_alternativebtn_AB_15:before, .animation_alternativebtn_AB_15:after,
.animation_alternativebtn_AB_15 span:before,
.animation_alternativebtn_AB_15 span:after {
  content: "";
  position: absolute;
  top: 0;
  width: 25.25%;
  height: 0;
  background-color: #5c484f;
  transition: all 0.5s ease;
  z-index: -1;
}
.animation_alternativebtn_AB_15:before {
  left: 0;
}
.animation_alternativebtn_AB_15:after {
  left: 50%;
}
.animation_alternativebtn_AB_15 span:before, .animation_alternativebtn_AB_15 span:after {
  top: auto;
  bottom: 0;
}
.animation_alternativebtn_AB_15 span:before {
  left: 25%;
}
.animation_alternativebtn_AB_15 span:after {
  left: 75%;
}
.animation_alternativebtn_AB_15:hover {
  color: #e6dde0;
}
.animation_alternativebtn_AB_15:hover:before,
.animation_alternativebtn_AB_15:hover:after,
.animation_alternativebtn_AB_15:hover span:before,
.animation_alternativebtn_AB_15:hover span:after {
  height: 100%;
}

Simple Animated Button Sample 16

Simple Animated Button 16

HTML:

<a class="animated_collisionbtn_AB_16" href="#">Simple Animated Button 16</a>

CSS:

.animated_collisionbtn_AB_16 {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position:relative;
  padding:1.2em 2.8em;
  color: #cb743e;
  border: 2px solid #cb743e;
  text-align:center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}

.animated_collisionbtn_AB_16:before, .animated_collisionbtn_AB_16:after {
  position: absolute;
  top: 50%;
  content: "";
  width: 20px;
  height: 20px;
  background-color: #c25b1c;
  border-radius: 50%;
  transition: all 0.8s ease;
  z-index: -1;
}
.animated_collisionbtn_AB_16:before {
  left: -20px;
  transform: translate(-50%, -50%);
}
.animated_collisionbtn_AB_16:after {
  right: -20px;
  transform: translate(50%, -50%);
}
.animated_collisionbtn_AB_16:hover {
  color: #f0d6c6;
}
.animated_collisionbtn_AB_16:hover:before {
  animation: criss-cross-left 0.8s both;
  animation-direction: alternate;
}
.animated_collisionbtn_AB_16:hover:after {
  animation: criss-cross-right 0.8s both;
  animation-direction: alternate;
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 150%;
    height: 375px;
  }
}

@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 150%;
    height: 375px;
  }
}

Simple Animated Button Sample 17

Simple Animated Button 17

HTML:

<a href="#" class="animated_btn17_AB">Simple Animated Button 17</a>

CSS:

.animated_btn17_AB {
    position: relative;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    padding:1.2em 2.8em;
    text-decoration: none;
    text-transform: uppercase;
    color: #ff007a;
    border: 2px solid #ff007a;
    border-radius: 10px;
    background: transparent;   
    overflow: hidden;   
    text-align: center;
    transition: color 0.4s ease;
}

.animated_btn17_AB::before,
.animated_btn17_AB::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50%;
    background: #ff007a;
    z-index: -1;
    transition: all 0.4s ease;
}

.animated_btn17_AB::before {
    top: 0;
    left: -100%;
}

.animated_btn17_AB::after {
    bottom: 0;
    left: 100%;
}

.animated_btn17_AB:hover::before {
    left: 0;
}

.animated_btn17_AB:hover::after {
    left: 0;
}

.animated_btn17_AB:hover {
    color: white;
}

Simple Animated Button Sample 18

Simple Animated Button 18

HTML:

<a href="#" class="animated_btn_18_AB">Simple Animated Button 18</a>

CSS:

.animated_btn_18_AB { 
  position: relative; 
  display: inline-block; 
  font-family: "Montserrat", sans-serif; 
  font-size: 1.5rem; 
  font-weight: 700; 
  padding:1.2em 2.8em; 
  text-decoration: none; 
  text-transform: uppercase; 
  color: white; 
  background: #8000ff; 
  border: none; 
  border-radius: 10px; 
  overflow: hidden; 
  text-align: center; 
} 

.animated_btn_18_AB::before { 
  content: ""; 
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 15%;
  aspect-ratio: 1/1; 
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent); 
  animation: shooting-stars 2s infinite; 
} 

@keyframes shooting-stars { 
  0% { transform: translate(0, 0) scale(0.3); 
    opacity: 1; 
  } 
  100% { 
    transform: translate(200px, 200px) scale(1); 
    opacity: 0; 
   } 
}

Simple Animated Button Sample 19

Simple Animated Button 19

HTML:

<a href="#" class="animated_btn19_AB">Simple Animated Button 19</a>

CSS:

.animated_btn19_AB { 
  position: relative; 
  display: inline-block; 
  font-family: "Montserrat", sans-serif; 
  font-size: 18px; 
  font-weight: 700; 
  padding: 1.2em 2.8em; 
  line-height: 1; 
  text-align: center; 
  text-transform: uppercase; 
  text-decoration: none; 
  color: white; 
  background: #ff007a; 
  border: none; 
  border-radius: 10px; 
  overflow: hidden; 
} 

.animated_btn19_AB::after { 
  content: '→'; 
  position: absolute; 
  top: 50%; 
  right: -50px; 
  transform: translateY(-50%); 
  font-size: 24px; 
  color: white; 
  transition: 
  right 0.4s ease; 
} 

.animated_btn19_AB:hover::after { 
  right: 10px; 
}

Simple Animated Button Sample 20

Simple Animated Button 20

HTML:

<a href="#" class="animated_flipbtn_20">
<span class="innertext">Simple Animated Button</span>
</a>

CSS:

.animated_flipbtn_20 {
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2em 2.8em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;  
  color: white;
  background: #ff007a;
  border: none;
  border-radius: 10px;
  overflow: hidden; 
  transition: transform 0.5s ease;
  perspective: 1000px; /* Ensures the 3D effect */   
}

.animated_flipbtn_20:hover {
  transform: rotateX(180deg); /* Flips the button */
  background: #8000ff;
}

.animated_flipbtn_20 .innertext {
  position: relative;
  z-index: 2; /* Keep the text above the button */
  display: inline-block;
  transform: rotateX(0deg); /* Cancel the rotation effect */
  transition: transform 0.5s ease;
}

.animated_flipbtn_20:hover .innertext {
  transform: rotateX(-180deg); /* Keep the text upright */
}

Simple Animated Button Sample 21

Simple Animated Button 21

HTML:

<a href="#" class="animated_flipbtn21_lftrt_AB">
<span class="lftrt_innertext">Simple Animated Button 21</span>
</a>

CSS:

.animated_flipbtn21_lftrt_AB {
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2em 2.8em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;  
  color: white;
  background: #ff007a;
  border: none;
  border-radius: 10px;
  overflow: hidden; 
  transition: transform 0.5s ease;
  perspective: 1000px; /* Ensures the 3D effect */   
}

.animated_flipbtn21_lftrt_AB:hover {
    transform: rotateY(180deg); /* Flip horizontally */
    background: #8000ff;
}

.animated_flipbtn21_lftrt_AB .lftrt_innertext {
    position: relative;
    z-index: 2; /* Keep the text above the button */
    display: inline-block;
    transform: rotateY(0deg); /* Cancel the rotation effect */
    transition: transform 0.5s ease;
}

.animated_flipbtn21_lftrt_AB:hover .lftrt_innertext {
    transform: rotateY(-180deg); /* Keep the text upright */
}

Simple Animated Button Sample 22

Animation Button 22

HTML:

<a href ="#" class="starttoend_animation_btn22_AB">
<span></span><span></span>
<span></span><span></span>Animation Button</a>

CSS:

.starttoend_animation_btn22_AB{
  position:relative;
  display:inline-block;
  font-family: "Montserrat", sans-serif;
  font-size:1.5rem;
  font-weight:700;
  padding: 1.2em 2.8em;
  color: #1670f0!important;
  text-align: center;
  text-transform:uppercase;
  text-decoration:none!important;
  letter-spacing: 5px;
  box-shadow: 0 0 10px;
  
  overflow:hidden;
}

.starttoend_animation_btn22_AB:hover{
  background:#7fe6ff; 
}

.starttoend_animation_btn22_AB::before
{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  bottom:2px;
  background:rgba(255,255,255,0.05);
  
}
.starttoend_animation_btn22_AB span:nth-child(1)
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to right, #0c002b ,#1779ff);
  animation: animate1 2s linear infinite;
  animation-delay:1s;
  
}
@keyframes animate1
{
  0%
  {
    transform:translateX(-100%);
}
  100%
  {
    transform:translateX(100%);
  }
}
.starttoend_animation_btn22_AB span:nth-child(2)
{
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:100%;
  background:linear-gradient(to bottom, #0c002b ,#1779ff);
  animation: animate2 2s linear infinite;
  animation-delay:2s;
}
@keyframes animate2
{
  0%
  {
    transform:translateY(-100%);
}
  100%
  {
    transform:translateY(100%);
  }
}
.starttoend_animation_btn22_AB span:nth-child(3)
{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to left, #0c002b ,#1779ff);
   animation: animate3 2s linear infinite;
  animation-delay:1s;
  
}
@keyframes animate3
{
  0%
  {
    transform:translateX(100%);
}
  100%
  {
    transform:translateX(-100%);
  }
}
.starttoend_animation_btn22_AB span:nth-child(4)
{
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:100%;
  background:linear-gradient(to top, #0c002b ,#1779ff);
   animation: animate4 2s linear infinite;
  animation-delay:2s;
  
}
@keyframes animate4
{
  0%
  {
    transform:translateY(100%);
}
  100%
  {
    transform:translateY(-100%);
  }
}

Simple Animated Button Sample 22A

Animation Button 22 A

HTML:

<a href ="#" class="starttoend_animation_btn22A_AB">
<span></span><span></span>
<span></span><span></span>Animation Button 22 A</a>

CSS:

.starttoend_animation_btn22A_AB{
  position:relative;
  display:inline-block;
  font-family: "Montserrat", sans-serif;
  font-size:1.5rem;
  font-weight:700;
  padding: 1.2em 2.8em;
  background: linear-gradient(to right, #ff007a, #8000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  text-transform:uppercase;
  text-decoration:none!important;
  letter-spacing: 2px;
  box-shadow: 0 0 10px;
  
  overflow:hidden;
}



.starttoend_animation_btn22A_AB::before
{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  bottom:2px;
  background:rgba(255,255,255,0.05);
  
}
.starttoend_animation_btn22A_AB span:nth-child(1)
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to right, #ff007a, #8000ff);
  animation: animate1 2s linear infinite;
  animation-delay:1s;
  
}
@keyframes animate1
{
  0%
  {
    transform:translateX(-100%);
}
  100%
  {
    transform:translateX(100%);
  }
}
.starttoend_animation_btn22A_AB span:nth-child(2)
{
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:100%;
  background:linear-gradient(to bottom, #ff007a, #8000ff);
  animation: animate2 2s linear infinite;
  animation-delay:2s;
}
@keyframes animate2
{
  0%
  {
    transform:translateY(-100%);
}
  100%
  {
    transform:translateY(100%);
  }
}
.starttoend_animation_btn22A_AB span:nth-child(3)
{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to left, #ff007a, #8000ff);
   animation: animate3 2s linear infinite;
  animation-delay:1s;
  
}
@keyframes animate3
{
  0%
  {
    transform:translateX(100%);
}
  100%
  {
    transform:translateX(-100%);
  }
}
.starttoend_animation_btn22A_AB span:nth-child(4)
{
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:100%;
  background:linear-gradient(to top, #ff007a, #8000ff);
   animation: animate4 2s linear infinite;
  animation-delay:2s;
  
}
@keyframes animate4
{
  0%
  {
    transform:translateY(100%);
}
  100%
  {
    transform:translateY(-100%);
  }
}

.starttoend_animation_btn22A_AB:hover span {
  animation-play-state: paused;
}

Simple Animated Button Sample 23

Simple Animated Button 23

HTML:

<a href="#" class="animated__btn23__AB">
<span class="animated__btn23__AB__animation">
<span class="animated__btn23__AB__text">Simple Animated Button 23</span>
</span></a>

CSS:

.animated__btn23__AB {
    position: relative;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background-color: white;
    color: black;
    border-radius: 0.5rem;
    border: 2px solid black;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.animated__btn23__AB::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    z-index: -1;
    background-color: black;
    transition: all 0.4s ease;
}

.animated__btn23__AB__animation {
    display: block;
    padding: 1.2em 2.8em;
    overflow: hidden;
    position: relative;

}

.animated__btn23__AB__animation::before {
    content: "";
    position: absolute;
    width: 150%;
    aspect-ratio: 1/1;
    background-color: black;
    left: 0;
    top: 100%;
    transition: transform 0.4s ease;
    transform-origin: top left;
    transform: rotate(0deg);
}

.animated__btn23__AB__text{
    display: block;
    z-index: 9999;
    position: relative;
}

.animated__btn23__AB:hover::before {
    left: 0;
    top: 0;
}

.animated__btn23__AB__animation:hover::before {
    transform: rotateZ(-90deg);
}

.animated__btn23__AB__animation:hover .animated__btn23__AB__text{
    color: white;
}

Simple Animated Button Sample 24

Simple Animated Button 24

HTML:

<a href="#" class="animated__btn24__AB">Simple Animated Button 24</a>

CSS:

.animated__btn24__AB {
    position: relative;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1.2em 2.8em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background-color: white;
    color: black;
    border-radius: 0.5rem;
    border: 2px solid black;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.animated__btn24__AB::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    z-index: -1;
    background-color: black;
    transition: all 0.4s ease;
}

.animated__btn24__AB:hover::before {
    left: 0;
    top: 0;
}

Simple Animated Button Sample 25

Simple Animated Button 25

HTML:

<a href="#" class="animated__btn25__AB">Simple Animated Button 25</a>

CSS:

.animated__btn25__AB {
    position: relative;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1.2em 2.8em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    color: black;
    border-radius: 0.5rem;
    border: 2px solid black;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.animated__btn25__AB:hover{
  color: white;
}

.animated__btn25__AB::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0%;
    width: 150%;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    z-index: -1;
    background-color: black;
    transition: all 0.8s ease;
    transform: rotateZ(90deg);
    transform-origin: left top;
}

.animated__btn25__AB:hover::before {
    transform: rotateZ(0deg);
}

Simple Animated Button Sample 26

Simple Animated Button 26

HTML:

<a href="#" class="slide-underline_button26">Simple Animated Button 26</a>

CSS:

 .slide-underline_button26 {
    display: inline-block;
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1.2em 2.8em;
    color: #007bff;
    box-shadow: 0 0 5px;
    text-decoration: none;
    text-align: center;
    text-transform:uppercase;
  }

  .slide-underline_button26::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #007bff;
    transition: width 0.3s ease;
  }

  .slide-underline_button26:hover::after {
    width: 100%;
  }

Simple Animated Button Sample 27

Simple Animated Button 27

HTML:

<a href="#" class="animated_btn27_AB">Simple Animated Button 27</a>

CSS:

.animated_btn27_AB {
  display: inline-block;
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2em 2.8em;
  color: #007bff;
  box-shadow: 0 0 5px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
 transition: all 0.5s ease;
 transition-delay: 0.5s;
}

.animated_btn27_AB::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #007bff;
  transition: all 0.5s ease;
}

.animated_btn27_AB::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0px;
  background: #007bff;
  transition: all 0.5s ease;
  transition-delay: 0.4s;
  z-index:-1;
}

.animated_btn27_AB:hover{
  color: white;
}
.animated_btn27_AB:hover::before {
  width: 100%;
}

.animated_btn27_AB:hover::after {
  height: 100%;
}

Simple Animated Button Sample 28

Simple Animated Button 28

HTML:

<a href="#" class="animated_btn28_AB">Simple Animated Button 28</a>

CSS:

.animated_btn28_AB{
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2em 2.8em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(79 70 229 / 1);
  border-radius: 5px;
  box-shadow: 0 0 #0000,  0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  overflow: hidden;
  transition: color 0.3s ease;
}

.animated_btn28_AB::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgb(79 70 229 / 1);
  transition: height 0.3s ease;
  z-index: -1;
}

.animated_btn28_AB:hover{
  color: white;
}

.animated_btn28_AB:hover:before{
  height: 100%;
}

Simple Animated Button Sample 29

Simple Animated Button 29

HTML:

<a href="#" class="animated_btn29_AB">
<span>Simple Animated Button 29</span>
<span class="animated_btn29_border_bottom"></span>
</a>

CSS:

.animated_btn29_AB{
  position: relative;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2em 2.8em 1.2em 1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none!important;
  color: rgb(79 70 229 / 1)!important;
  border-radius: 5px;
  box-shadow: 0 0 #0000,  0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.animated_btn29_AB .animated_btn29_border_bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgb(79 70 229 / 1);
  transition: all 0.3s ease;
  z-index: -1;
}

.animated_btn29_AB::before{
  content: "\2197";
  position: absolute;
  left: 5%;
  top: 50%;
  font-size: 30px;
  transform: translateX(-500%) translateY(-50%) rotate(45deg);
  transition: all 0.3s ease;
}

.animated_btn29_AB::after{
  content: "\2197";
  position: absolute;
  right: 5%;
  top: 50%;
  font-size: 30px;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s ease;
}

.animated_btn29_AB:hover{
  color: white!important;
  padding: 1.2em 1em 1.2em 2.8em;
}

.animated_btn29_AB:hover .animated_btn29_border_bottom{
  height: 100%;
}

.animated_btn29_AB:hover::before{
  transform: translateX(0%) translateY(-50%) rotate(45deg);
}

.animated_btn29_AB:hover::after{
  transform: translateX(500%) translateY(-50%) rotate(45deg);
}

Simple Animated Button Sample 30

Simple Animated Button 30

HTML:

<a class="animated_btn30_AB">
   <span class="text">Simple Animated Button 30</span>
</a>

CSS:

.animated_btn30_AB {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.2em 2.8em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #000;
  color: #fff;
  border: 2px solid black;
  z-index: 0;
  overflow: hidden;
  position: relative;
}

.animated_btn30_AB .text {
  display: block;
  position: relative;
}

.animated_btn30_AB:hover .text {
  animation: move-up-alternate 0.3s forwards;
  color: black;
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(100%);
  }

  51% {
    transform: translateY(40%);
  }

  to {
    transform: translateY(0);
  }
}

.animated_btn30_AB:after,
.animated_btn30_AB:before {
  --skew: 0.2;
  background: #fff;
  content: "";
  display: block;
  height: 110%;
  left: -57%;
  pointer-events: none;
  position: absolute;
  top: -114%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.2s ease;
  width: 100%;
}

.animated_btn30_AB:after {
  --progress: 0%;
  right: -57%;
  left:auto;
  top: 104%;
  z-index: -1;
}

.animated_btn30_AB:hover:before {
  --progress: 100%;
}

.animated_btn30_AB:hover:after {
  --progress: -102%;
}

Simple Animated Button Sample 31

Simple Animated Button 31

HTML:

<a href="#" class="animated_btn31_AB">Simple Animated Button 31</a>

CSS:

.animated_btn31_AB {
 --color: #00A97F;
 --color2: rgb(255, 255, 255);
 position: relative;
 display: inline-block;
 font-family: "Montserrat", sans-serif;
 font-size: 1.5rem;
 font-weight: 700;
 line-height: 1;
 text-align: center;
 padding: 1.2em 2.8em;
 text-transform: uppercase;
 text-decoration: none !important;
 background-color: transparent;
 border-radius: 6px;
 border: .3px solid var(--color);
 transition: .5s ease-in-out;
 overflow: hidden;
 cursor: pointer;
 z-index: 1;
 color: var(--color);
}

.animated_btn31_AB::after, .animated_btn31_AB::before {
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 transform: skew(90deg) translate(-50%, -50%);
 position: absolute;
 inset: 50%;
 left: 25%;
 z-index: -1;
 transition:all .5s ease-in-out;
 background-color: var(--color);
}

.animated_btn31_AB::before {
 top: -50%;
 left: -25%;
 transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
}

.animated_btn31_AB:hover::before {
 transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
}

.animated_btn31_AB:hover::after {
 transform: skew(45deg) translate(-50%, -50%);
}

.animated_btn31_AB:hover {
 color: var(--color2);
}

.animated_btn31_AB:active {
 filter: brightness(.7);
 transform: scale(.98);
}

Simple Animated Button Sample 32

Simple Animated Button 32

HTML:

<a href="#" class="animated_btn32_AB">Simple Animated Button 32</a>

CSS:

.animated_btn32_AB {
  position:relative;
  display:inline-block;
  font-family: "Montserrat", sans-serif;
  font-size:1.5rem;
  font-weight:700;
  padding: 1.2em 2.8em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: #f8f8f8;
  transition: .5s ease;
  cursor: pointer;
}

.animated_btn32_AB::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 2px;
  width: 0;
  background-color: #f8f8f8;
  transition: .5s ease;
}

.animated_btn32_AB:hover {
  color: #181818;
  transition-delay: .5s;
}

.animated_btn32_AB:hover::before {
  width: 100%;
}

.animated_btn32_AB::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  background-color: #f8f8f8;
  transition: .4s ease;
  z-index: -1;
}

.animated_btn32_AB:hover::after {
  height: 100%;
  transition-delay: 0.4s;
}

Simple Animated Button Sample F

Simple Animated Button F

HTML:

<a class="Custom__Bubble__btn__AB">Simple Animated Button F
<span></span>
<span></span>
<span></span>
<span></span></a>

CSS:

.Custom__Bubble__btn__AB {
    border: 2px solid #fff;
    box-shadow: 0px 0px 5px #000;
    border-radius: 50px;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    z-index: 1;
    background-color: #39d47a;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    padding: 1.2em 2.8em;
    transition: 2s ease;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.Custom__Bubble__btn__AB:hover {
    color: #39d47a;
}


.Custom__Bubble__btn__AB:hover span {
    height: 250%;
}

.Custom__Bubble__btn__AB span {
    position: absolute;
    display: inline-block;
    width: 50%;
    height: 0%;
    background-color: #ffffff;
    bottom: -30px;
    border-radius: 50% 50% 0px 0px;
    transition: 0.5s;
    z-index: -1;
}

.Custom__Bubble__btn__AB span:nth-child(1) {
    left: calc((1 - 1) * 25%);
    transition-delay: calc((1 - 1) * 0.1s);
    border-radius: 0px 50px 0px 0px;
}

.Custom__Bubble__btn__AB span:nth-child(2) {
    left: calc((2 - 1) * 25%);
    transition-delay: calc((2 - 1) * 0.1s);
}

.Custom__Bubble__btn__AB span:nth-child(3) {
    left: calc((3 - 1) * 25%);
    transition-delay: calc((3 - 1) * 0.1s);
}

.Custom__Bubble__btn__AB span:nth-child(4) {
    left: calc((4 - 1) * 25%);
    transition-delay: calc((4 - 1) * 0.1s);
}

Gradient Animated Button: 8

Gradient Animated Button 1 Gradient Animated Button 2 Gradient Animated Button 3 gradient animated button 4 Gradient Animated Button 5 Gradient Animated Button 6 Gradient Animated Button 7 Gradient Animated Button 8

Gradient Animated Button Sample 1

Gradient Animated Button 1

HTML:

<a href="#" class="gradient_animated-button1">Gradient Animated Button Sample 1</a>

CSS:

.gradient_animated-button1 {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    padding: 1.2em 2.8em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ff6a00, #ee0979);
    border: 2px solid transparent;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    z-index: 1;
    box-shadow: 0 0 0 transparent; /* No initial shadow to avoid resizing */
}

.gradient_animated-button1::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
    animation: rotateGlow 3s linear infinite;
    z-index: -1;
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.gradient_animated-button1:hover {
    background: linear-gradient(90deg, #ee0979, #ff6a00, #ff6a00, #ee0979);
    border-color: transparent; /* Ensure no resizing due to border */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(238, 9, 121, 0.5); /* Glowing effect without resizing */
    transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    color:#fff;
}

.gradient_animated-button1:hover::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%);
}

Gradient Animated Button Sample 2

Gradient Animated Button 2

HTML:

<a href="#" class="gradient_animated_button2-diagonal-slide">Gradient Animated Button Sample 2</a>

CSS:

.gradient_animated_button2-diagonal-slide {
    display: inline-block;
    font-family: "Montserrat", sans-serif; 
    font-size: 1.5rem; 
    font-weight: 700; 
    line-height: 1; 
    padding: 1.2em 2.8em;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, #ff416c, #ff4b2b);
    border: none;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.gradient_animated_button2-diagonal-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: skewX(-45deg);
    transition: all 0.5s ease;
}

.gradient_animated_button2-diagonal-slide:hover::before {
    left: 100%;
}

Gradient Animated Button Sample 3

Gradient Animated Button 3

HTML:

<a href="#" class="gradient_animated_button3-wave-effect">Gradient Animated Button Sample 3</a>

CSS:

.gradient_animated_button3-wave-effect {
    display: inline-block;
    font-family: "Montserrat", sans-serif; 
    font-size: 1.5rem; 
    font-weight: 700; 
    line-height: 1; 
    padding: 1.2em 2.8em;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, #11998e, #38ef7d);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.gradient_animated_button3-wave-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: ripple 1s infinite;
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(10);
        opacity: 0;
    }
}

Gradient Animated Button Sample 4

gradient animated button 4

HTML:

<a class="gradient_animated_button4_btn_hover">gradient animated button sample 4</a>

CSS:

.gradient_animated_button4_btn_hover {
    display: inline-block;
    font-family: "Montserrat", sans-serif; 
    font-size: 1.5rem; 
    font-weight: 700; 
    line-height: 1; 
    padding: 1.2em 2.8em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    margin: 20px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}

.gradient_animated_button4_btn_hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.gradient_animated_button4_btn_hover:focus {
    outline: none;
}

Gradient Animated Button Sample 5

Gradient Animated Button 5

HTML:

<a class="gradient_animated_button5_liquid_animation">Gradient Animated Button 5
<span></span><span></span><span></span></a>

CSS:

.gradient_animated_button5_liquid_animation {
    position: relative;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    padding: 1.2em 2.8em;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    border-radius: 50px;
    background: linear-gradient(45deg, #ff6b6b, #f94d6a);
    cursor: pointer;
    border: none;
    outline: none;
}

.gradient_animated_button5_liquid_animation span {
    position: absolute;
    display: block;
    width: 150%;
    height: 150%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: rippleLiquid 6s infinite;
    pointer-events: none;
}

.gradient_animated_button5_liquid_animation span:nth-child(1) {
    top: -50%;
    left: -50%;
    animation-delay: 0s;
}

.gradient_animated_button5_liquid_animation span:nth-child(2) {
    top: -50%;
    right: -50%;
    animation-delay: 1.5s;
}

.gradient_animated_button5_liquid_animation span:nth-child(3) {
    bottom: -50%;
    left: -50%;
    animation-delay: 3s;
}

@keyframes rippleLiquid {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

Gradient Animated Button Sample 6

Gradient Animated Button 6

HTML:

<a href="#" class="animated_btn6_AB">Gradient Animated Button 6</a>

CSS:

.animated_btn6_AB {
   position: relative;
   display: inline-block;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   padding:1.2em 2.8em;
   line-height: 1;
   text-align: center;
   text-decoration: none;
   color: #fff;
   border: 2px solid transparent;
   border-radius: 5px;
   background: linear-gradient(90deg, #ff007a, #8000ff);
   background-size: 200%;
   transition: all 0.4s ease-in-out;
   overflow: hidden;
}

.animated_btn6_AB::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0;
   height: 3px;
   background: #fff;
   transition: all 0.4s ease-in-out;
   transform: translateX(-50%);
}

.animated_btn6_AB:hover {
   background-position: 100%;
   color: #fff;
   border-color: transparent;
}

.animated_btn6_AB:hover::after {
   width: 100%;
}

.animated_btn6_AB::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(255, 0, 122, 0.5), rgba(0, 0, 0, 0));
   transition: opacity 0.4s ease-in-out;
   opacity: 0;
   z-index: -1;
}

.animated_btn6_AB:hover::before {
   opacity: 1;
}

Gradient Animated Button Sample 7

Gradient Animated Button 7

HTML:

<a href="#" class="gradient_animation_btn7_AB">Gradient Animated Button 7</a>

CSS:

.gradient_animation_btn7_AB {
    display: inline-block;
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    padding:1.2em 2.8em;
    line-height: 1;
    text-align: center;
    text-decoration: none!important;
    color: #fff!important;
    border: none;
    border-radius: 50px;
    background: linear-gradient(90deg, #ff007a, #8000ff);
    background-size: 200%;
    transition: background-position 0.5s ease;
    
}

.gradient_animation_btn7_AB:hover {
    background-position: 100%;
}

Gradient Animated Button Sample 8

Gradient Animated Button 8

HTML:

<a href="#" class="gradient_animation_btn8_AB">Gradient Animated Button 8</a>

CSS:

.gradient_animation_btn8_AB {
   display: inline-block;  
   padding: 1.2em 2.8em;
   font-family: "Montserrat", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   color: #fff;
   background: linear-gradient(90deg, #e74c3c, #3498db);
   text-align: center;
   text-decoration: none;
   border-radius: 8px;
   position: relative;
   overflow: hidden;
   transition: background-position 0.3s ease;
   background-size: 200%;
   background-position: right;
}

.gradient_animation_btn8_AB:hover {
   background-position: left;
}

Icon Buttons: 4

Logout

Delete Launch ADD TO CART

Icon Button Sample 1

Logout

HTML:

<a href="#" class="icon_btn1_AB">
<div class="sign"><svg viewBox="0 0 512 512"><path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"></path></svg></div>
<div class="text">Logout</div>
</a>

CSS:

.icon_btn1_AB {
  position: relative;
  display: flex;
  font-family: "Montserrat", sans-serif;
  width: 45px;
  height: 45px;
  justify-content: space-between;
  align-items:center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: rgb(255, 65, 65);
  overflow: hidden;
  text-decoration: none!important;
  padding: 0 15px;
}

/* plus sign */
.icon_btn1_AB .sign {
  width: 100%;
  transition-duration: .3s;
  display: flex;
  justify-content: center;
  align-items:center;
}

.icon_btn1_AB .sign svg {
  width: 17px;
}

.icon_btn1_AB .sign svg path {
  fill: white;
}
/* text */
.icon_btn1_AB .text {
  
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: .3s;
}
/* hover effect on button width */
.icon_btn1_AB:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: .3s;
  padding-right: 10px 20px;
}

.icon_btn1_AB:hover .sign {
  transition-duration: .3s;
  justify-content: flex-start;
}
/* hover effect button text */
.icon_btn1_AB:hover .text {
  position: relative;
  right: 0;
  opacity: 1;
  width: max-content;
  transition-duration: .3s;
}
/* button click effect*/
.icon_btn1_AB:active {
  transform: translate(2px ,2px);
}

Icon Button Sample 1A

Delete

HTML:

<a href="#" class="icon_btn1A_AB">
<div class="sign"><svg viewBox="0 0 448 512" class="svgIcon"><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path></svg></div>
<span class="text">Delete</span>
</a>

CSS:

.icon_btn1A_AB {
  position: relative;
  display: flex;
  font-family: "Montserrat", sans-serif;
  width: 45px;
  height: 45px;
  justify-content: center;
  align-items:center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: rgb(255, 65, 65);
  overflow: hidden;
  text-decoration: none!important;
}

/* plus sign */
.icon_btn1A_AB .sign {
  transition-duration: .3s;
  display: flex;
  justify-content: center;
  align-items:center;
}

.icon_btn1A_AB .sign svg {
  width: 17px;
}

.icon_btn1A_AB .sign svg path {
  fill: white;
}
/* text */
.icon_btn1A_AB .text {
  
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: .3s;
}
/* hover effect on button width */
.icon_btn1A_AB:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: .3s;
  padding-right: 10px 20px;
}

.icon_btn1A_AB:hover .sign {
  transition-duration: .3s;
  justify-content: flex-start;
}
/* hover effect button text */
.icon_btn1A_AB:hover .text {
  position: relative;
  right: 0;
  opacity: 1;
  margin-left: 10px;
  width: max-content;
  transition-duration: .3s;
}
/* button click effect*/
.icon_btn1A_AB:active {
  transform: translate(2px ,2px);
}

Icon Button Sample 2

Launch

HTML:

<a href="#" class="icon_btn2_AB"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="currentColor"></path></svg>
<span>Launch</span>
</a>

CSS:

.icon_btn2_AB {
  display: flex;
  justify-content: center;
  align-items:center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 1.2em 2.8em;
  color: white;
  background: #ad5389;
  background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
  border: none;
  letter-spacing: 0.05em;
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}

.icon_btn2_AB svg {
  margin-right: 3px;
  transform: rotate(30deg);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  display: inline-block;
  vertical-align: middle;
}

.icon_btn2_AB span {
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  display: inline-block;
}

.icon_btn2_AB:hover svg {
  transform: translateX(5px) rotate(90deg);
}

.icon_btn2_AB:hover span {
  transform: translateX(10px);
}

Icon Button Sample 3

ADD TO CART

HTML:

<a href="" class="icon_cartBtn3_AB">
<svg class="cart" fill="white" viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>
ADD TO CART
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" class="product"><path d="M211.8 0c7.8 0 14.3 5.7 16.7 13.2C240.8 51.9 277.1 80 320 80s79.2-28.1 91.5-66.8C413.9 5.7 420.4 0 428.2 0h12.6c22.5 0 44.2 7.9 61.5 22.3L628.5 127.4c6.6 5.5 10.7 13.5 11.4 22.1s-2.1 17.1-7.8 23.6l-56 64c-11.4 13.1-31.2 14.6-44.6 3.5L480 197.7V448c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64V197.7l-51.5 42.9c-13.3 11.1-33.1 9.6-44.6-3.5l-56-64c-5.7-6.5-8.5-15-7.8-23.6s4.8-16.6 11.4-22.1L137.7 22.3C155 7.9 176.7 0 199.2 0h12.6z"></path></svg>
</a>

CSS:

.icon_cartBtn3_AB {
  width: 155px;
  height: 50px;
  border: none;
  font-family: "Montserrat", sans-serif;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white!important;
  font-weight: 500;
  position: relative;
  background-color: rgb(29, 29, 29);
  box-shadow: 0 20px 30px -7px rgba(27, 27, 27, 0.219);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none!important;
  text-transform: uppercase;
}

.icon_cartBtn3_AB {
  z-index: 2;
}

.cartBtn:active {
  transform: scale(0.96);
}

.icon_cartBtn3_AB .product {
  position: absolute;
  width: 12px;
  border-radius: 3px;
  content: "";
  left: 23px;
  bottom: 23px;
  opacity: 0;
  z-index: 1;
  fill: rgb(211, 211, 211);
}

.icon_cartBtn3_AB:hover .product {
  animation: slide-in-top 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-30px);
    opacity: 1;
  }

  100% {
    transform: translateY(0) rotate(-90deg);
    opacity: 1;
  }
}

.icon_cartBtn3_AB:hover .cart {
  animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

This Post Has 4 Comments

Quiteria Franklin December 16, 2024 Reply

Code works perfectly and easy to copy with 1 click. I want to add the same type of post do you allow rss feed to my blog post to auto fetch the data? Thank you
1. Saqib K. December 23, 2024 Reply
  
  Thank you! Unfortunately, the RSS feed isn’t available right now. However, if you need the full code, you can write a blog post and provide a link to our article where users can find more codes. We’re updating the post daily or weekly with the latest codes.
Shahzad Raza December 21, 2024 Reply

I found this post quiet useful but I’ve to scroll lot to find the related button. It would be more helpful if you combine all the buttons in one place so, we can copy the code whatever suitable for the layout. Thanks for creating the useful content.
1. Saqib K. December 23, 2024 Reply
  
  Thank you for your comment! Yes, we’ve added a section at the top that shows all the buttons grouped together, and you can easily copy the code you like.