Hover Effect on HTML Button and Anchor Link

There are lot of different things you can do when a user hovers there mouse courser on an HTML Button or Anchor tag.

Here are some of the background changing effects that you can apply on to a button or anchor tag.

• Left To Right

Here is how you can slide the background color from left to right.

Code:-

.btn_hover_1{

  font-size: 22px;

  padding: 20px 25px;

  margin: 40px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to right, #ff621a 50%, #ffcc1a 50%);

  background-size: 200%;

  background-position: right;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_1:hover{

  background-position: left;

}

• Right To Left

Here is how you can slide the background color from right to left.

Code:-

.btn_hover_2{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to left, #ff621a 50%, #ffcc1a 50%);

  background-size: 200%;

  background-position: left;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_2:hover{

  background-position: right;

}

• Top To Bottom

Here is how you can slide the background color from top to bottom.

Code:-

.btn_hover_3{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to bottom, #ff621a 50%, #ffcc1a 50%);

  background-size: 100% 200%;

  background-position: bottom;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_3:hover{

  background-position: top;

}

• Bottom To Top

Here is how you can slide the background color from bottom to top.

Code:-

.btn_hover_4{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to top, #ff621a 50%, #ffcc1a 50%);

  background-size: 100% 200%;

  background-position: top;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_4:hover{

  background-position: bottom;

}

• Left To Right Gradient

Here is how you can create a gradient effect of two colors in the background from left to right.

Code:-

.btn_hover_5{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to right, #ff621a 10%, #ffcc1a 90%);

  background-size: 200%;

  background-position: right;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_5:hover{

  background-position: left;

}

“Note: Here the CSS is written for Anchor links. For creating this effect on a Button you just have to write ‘border: 0’ in the CSS style for that button and all other remains same.”

For Example:-

.btn_hover_1{

  font-size: 22px;

  padding: 20px 25px;

  margin: 40px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to right, #ff621a 50%, #ffcc1a 50%);

  background-size: 200%;

  background-position: right;

  transition: all .2s linear;

  color: #fff;

  border: 0;

}

.btn_hover_1:hover{

  background-position: left;

}

Complete Code

HTML CODE:

CSS CODE:

body{

  background-color: #000;

}

a{

  text-decoration: none;

}

.main{

  margin: 100px 60px;

}

h1{

  color: #fff;

  font-size: 80px;

  width: 100%;

  text-align: center;

  margin: 150px auto;

}

.btn_hover_1{

  font-size: 22px;

  padding: 20px 25px;

  margin: 40px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to right, #ff621a 50%, #ffcc1a 50%);

  background-size: 200%;

  background-position: right;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_1:hover{

  background-position: left;

}

.btn_hover_2{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to left, #ff621a 50%, #ffcc1a 50%);

  background-size: 200%;

  background-position: left;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_2:hover{

  background-position: right;

}

.btn_hover_3{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to bottom, #ff621a 50%, #ffcc1a 50%);

  background-size: 100% 200%;

  background-position: bottom;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_3:hover{

  background-position: top;

}

.btn_hover_4{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to top, #ff621a 50%, #ffcc1a 50%);

  background-size: 100% 200%;

  background-position: top;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_4:hover{

  background-position: bottom;

}

.btn_hover_5{

  font-size: 22px;

  padding: 20px 25px;

  margin: 20px;

  background-color: #ff621a;

        /* // linear-gradient(direction, color1, color2); */

  background: linear-gradient(to right, #ff621a 10%, #ffcc1a 90%);

  background-size: 200%;

  background-position: right;

  transition: all .2s linear;

  color: #fff;

}

.btn_hover_5:hover{

  background-position: left;

}