Hover Effect on HTML Button and Anchor Link - MrAboutTech

Breaking

Saturday, December 29, 2018

Hover Effect on HTML Button and Anchor Link

Hover Effect

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
left to right background slide


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
right to left background slide


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
top to bottom background slide


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
bottom to top background slide


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
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:


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;
}



11 comments:

  1. Thanks for the nice blog. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us new york web designs

    ReplyDelete
  2. When I originally commented I clicked the -Notify me when new feedback are added- checkbox and now every time a remark is added I get four emails with the same comment. Is there any approach you’ll be able to remove me from that service? Thanks! ny web design firms

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Some genuinely marvellous work on behalf of the owner of this web site, utterly outstanding content. branding agency san francisco

    ReplyDelete
  5. Although, regardless how positive you actually are in treating an actual platform, at some point there are an incident wherever you should want to do some people regular supervision; and in addition dependant on your real age and in addition wellbeing, and so the body-weight using the caravan it’s really a totally hard do physical exercise. caravan touch up paint sf design agency

    ReplyDelete
  6. Im no professional, but I believe you just crafted a very good point point. You definitely understand what youre talking about, and I can seriously get behind that. Thanks for staying so upfront and so truthful. web designer la

    ReplyDelete
  7. After study just a few of the blog posts in your web site now, and I actually like your means of blogging. I bookmarked it to my bookmark website listing and will probably be checking again soon. Pls check out my web page as properly and let me know what you think. website design agency

    ReplyDelete
  8. Hey there! Nice post! Please inform us when we will see a follow up! web design tips

    ReplyDelete