Skip to main content

15+ CSS Buttons Animation On Hover With Source Code

best-buttons-animation-collection

In this tutorial, we are going to create different animations for buttons. When the user hovers the mouse on the button that time effect will be shown. We are not only showing those animations on the button along with it, but the source code is also attach. Each and Every animation have a specific concept and CSS properties to create that effect. It will help you to learn something new.

 

Simple Button Design

First, we will create a button element with the help of html tag. The output is already shown below. This button has some default css properties like border-style, border-radius, background-color etc. In simple words, we are going to play with the css properties button and some advanced concepts of css.

<button>Button</button>

Output:

 

Now let's apply the basic css properties on this button. All changed codes are already given below. But you have to add one css class in the tag of button attributes, the name of class is "simple-btn", as you can see in the below code.

<button class="simple-btn">Button</button>

 

.simple-btn {
  width: 136px;
  height: 42px;
  color: #000;
  outline: none;
  border: none;
  border-radius: 2px;
  padding: 10px 24px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}

Output:

 

01. Button

In this animation, the background of the button  will change when the user hover the mouse.

<button class="simple-btn btn-01">Button</button>

 

.btn-01 {
  background: rgb(96,9,240);
  color:  white;
  border: none;
}
.btn-01:hover {
   background: rgb(0,3,255);
}

Output:

 

02. Button

This button animation will change the "box-shadow" when the user hovers the mouse on the button.

<button class="simple-btn btn-02">Button</button>

 

.btn-02 {
  background: rgb(96,9,240);
  color:  white;
  border: none;
  
}
.btn-02:before {
  height: 0%;
  width: 2px;
}
.btn-02:hover {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

Output:

 

03. Button

In this animation, the "border" of the button automatiocally will change width and the background will become transparent.

<button class="simple-btn btn-03"><span>Button</span></button>

 

.btn-03 {
  position: relative;
  background: rgb(96,9,240);
  background: linear-gradient(90deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  
}
.btn-03 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-03:before,
.btn-03:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}

.btn-03:before {
  height: 0%;
  width: 2px;
}

.btn-03:after {
  width: 0%;
  height: 2px;
}

.btn-03:hover{
   background: transparent;
  box-shadow: none;
}

.btn-03:hover:before {
  height: 100%;
}

.btn-03:hover:after {
  width: 100%;
}

.btn-03 span:hover{
   color: rgba(2,126,251,1);
}

.btn-03 span:before,
.btn-03 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}

.btn-03 span:before {
  width: 2px;
  height: 0%;
}

.btn-03 span:after {
  width: 0%;
  height: 2px;
}

.btn-03 span:hover:before {
  height: 100%;
}

.btn-03 span:hover:after {
  width: 100%;
}

Output:

 

04. Button

In this animation, the button will change the "background-image" (here background-image is linear-gradient color scheme) and the button border will be changed when the user hovers the mouse on it.

<button class="simple-btn btn-04"><span>Button</span></button>

 

.btn-04 {
  background-color: #4dccc6;
  background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}

.btn-04:hover {
  background-color: #89d8d3;
  background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}

.btn-04 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-04:before,
.btn-04:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .9),
    -4px -4px 6px 0 rgba(116, 125, 136, .2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, .9),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}

.btn-04:before {
  height: 0%;
  width: .1px;
}

.btn-04:after {
  width: 0%;
  height: .1px;
}

.btn-04:hover:before {
  height: 100%;
}

.btn-04:hover:after {
  width: 100%;
}

.btn-04 span:before,
.btn-04 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .9),
    -4px -4px 6px 0 rgba(116, 125, 136, .2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, .9),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}

.btn-04 span:before {
  width: .1px;
  height: 0%;
}

.btn-04 span:after {
  width: 0%;
  height: .1px;
}

.btn-04 span:hover:before {
  height: 100%;
}

.btn-04 span:hover:after {
  width: 100%;
}

Output:

 

05. Button

In this animation, the "background-color" button will become transparent. Apart from this, the upper, and lower borders will change width when the user hovers the mouse on the button.

<button class="simple-btn btn-05"><span>Button</span></button>

 

.btn-05 {
  position: relative;
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  background: rgb(255, 27, 0);
  background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
}

.btn-05:hover {
  color: #f0094a;
  background: transparent;
  box-shadow: none;
}

.btn-05:before,
.btn-05:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #f0094a;
  box-shadow:
    -1px -1px 5px 0px #fff,
    7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;
  transition: 400ms ease all;
}

.btn-05:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-05:hover:before,
.btn-05:hover:after {
  width: 100%;
  transition: 800ms ease all;
}

Output:

 

06. Button

In this animation, the button will show a gray color border when the user hovers the mouse on it.

<button class="simple-btn btn-06"><span>Button</span></button>

 

.btn-06 {
  position: relative;
  background: rgb(247,150,192);
background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-06 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-06:before,
.btn-06:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 1px;
 box-shadow:
   -1px -1px 20px 0px rgba(255,255,255,1),
   -4px -4px 5px 0px rgba(255,255,255,1),
   7px 7px 20px 0px rgba(0,0,0,.4),
   4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-06:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.btn-06:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.btn-06:hover{
  background: transparent;
  color: #76aef1;
  box-shadow: none;
}
.btn-06:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.btn-06:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.btn-06 span:before,
.btn-06 span:after {
  position: absolute;
  content: "";
  box-shadow:
   -1px -1px 20px 0px rgba(255,255,255,1),
   -4px -4px 5px 0px rgba(255,255,255,1),
   7px 7px 20px 0px rgba(0,0,0,.4),
   4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-06 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.btn-06 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.btn-06 span:hover:before {
  width: 100%;
}
.btn-06 span:hover:after {
  width: 100%;
}

Output:

 

07. Button

In this animation, when the user hovers the mouse on the button a border will be created animation. Same time it will show inside "box-shadow".

<button class="simple-btn btn-07"><span>Button</span></button>

 

.btn-07 {
  position: relative;
  background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-07 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-07:before,
.btn-07:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-07:before{
   height: 0%;
   width: 2px;
}
.btn-07:after {
  width: 0%;
  height: 2px;
}
.btn-07:hover{
  color: rgba(251,75,2,1);
  background: transparent;
}
.btn-07:hover:before {
  height: 100%;
}
.btn-07:hover:after {
  width: 100%;
}
.btn-07 span:before,
.btn-07 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-07 span:before {
  width: 2px;
  height: 0%;
}
.btn-07 span:after {
  height: 2px;
  width: 0%;
}
.btn-07 span:hover:before {
  height: 100%;
}
.btn-07 span:hover:after {
  width: 100%;
}

Output:

 

08. Button

In this animation, a similar kind of effect will be created. when the user hovers the mouse on the button a border will be created with animation but in this button animation no inside "box-shadow".

<button class="simple-btn btn-08"><span>Button</span></button>

 

.btn-08 {
  position: relative;
  background-color: #f0ecfc;
  background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-08 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-08:before,
.btn-08:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #c797eb;
  transition: all 0.3s ease;
}
.btn-08:before{
   height: 0%;
   width: 2px;
}
.btn-08:after {
  width: 0%;
  height: 2px;
}
.btn-08:hover:before {
  height: 100%;
}
.btn-08:hover:after {
  width: 100%;
}
.btn-08:hover{
  background: transparent;
}
.btn-08 span:hover{
  color: #c797eb;
}
.btn-08 span:before,
.btn-08 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #c797eb;
  transition: all 0.3s ease;
}
.btn-08 span:before {
  width: 2px;
  height: 0%;
}
.btn-08 span:after {
  height: 2px;
  width: 0%;
}
.btn-08 span:hover:before {
  height: 100%;
}
.btn-08 span:hover:after {
  width: 100%;
}
  

Output:

 

09. Button

In this animation, when the user hovers the mouse on the button background color will be changed with flip animation and the "font-color" will be changed.

<button class="simple-btn btn-09"><span>Button</span></button>

 

.btn-09 {
  position: relative;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-09:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background-color: #1fd1f9;
background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
  transition: all 0.3s ease;
}
.btn-09:hover {
  background: transparent;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;
}
.btn-09:hover:after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

Output:

 

10. Button

In this animation, when the user hovers the mouse on the button the background color will change with the zoom animation of "background-color".

<button class="simple-btn btn-10"><span>Button</span></button>

 

.btn-10 {
  position: relative;
  background: rgb(22,9,240);
  background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-10:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  -webkit-transform: scale(.1);
  transform: scale(.1);
}
.btn-10:hover {
  color: #fff;
  border: none;
  background: transparent;
}
.btn-10:hover:after {
  background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);
  -webkit-transform: scale(1);
  transform: scale(1);
}

Output:

 

11. Button

This animation is very simple and it has a flash effect after every three seconds (3s).

<button class="simple-btn btn-11"><span>Button</span></button>

 

.btn-11 {
  position: relative;
  border: none;
  background: rgb(251,33,117);
    background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
    color: #fff;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .7;
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

Output:

 

12. Button

This button has a 33D flip effect when the mouse hovers on it. The text of the button will be changed by using css properties.

<button class="simple-btn btn-12"><span>Click</span><span>Button</span></button>

 

.btn-12{
  right: 20px;
  bottom: 20px;
  border:none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}

.btn-12 span {
  /*position: relative;*/
  background: rgb(0,172,238);
  background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  border-radius: 5px;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn-12 span:nth-child(1) {
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}

.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}

.btn-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.btn-12:hover span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

Output:

 

13. Button

In this animation, when the user hovers the mouse on the button a slide will come from top to bottom.

<button class="simple-btn btn-13">Button</button>

 

.btn-13 {
  position: relative;
  background-color: #89d8d3;
  background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
  border: none;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
   background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}

Output:

 

14. Button

In this animation, when the user hovers the mouse on the button a slide will come from bottom to top.

<button class="simple-btn btn-14">Button</button>

 

.btn-14 {
  position: relative;
  background: rgb(255,151,0);
  border: none;
  z-index: 1;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #eaf818;
  background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: #000;
}
.btn-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-14:active {
  top: 2px;
}

Output:

 

15. Button

In this animation, when the user hovers the mouse on the button a slide will come from left to right.

<button class="simple-btn btn-15">Button</button>

 

.btn-15 {
  position: relative;
  background: #b621fe;
  border: none;
  z-index: 1;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: #663dff;
  border-radius: 5px;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}

Output:

 

16. Button

In this animation, when the user hovers the mouse on the button a slide will come from right to left.

<button class="simple-btn btn-16">Button</button>

 

.btn-16 {
  position: relative;
  border: none;
  color: #000;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-16:hover {
  color: #000;
}
.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-16:active {
  top: 2px;
}

Output:

Comments