Beranda
Blogger
Button Design

How to Add Animated Gradient Buttons On Hover Using HTML & CSS.

Hello Friends, Welcome to AS Themes World. If you are looking for some modern buttons that replace your older buttons for your blog, then you are at the right place. In this article we are going to learn "How to Add Animated Gradient Buttons with Hover Effect using HTML and CSS".

Preview of Animated Gradient Buttons









Steps to Add Gradient Button Hover

It is very easy to add a button in Blogger just follow the two simple steps that are given below. If you don't follow the steps carefully then buttons doesn't work. So follow the steps carefully.

Step 1. Adding CSS Codes

First of all search for the code ]]></b:skin> on your template and add the following CSS code above it. 

 @import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900");

body {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 100vh;
  font-family: "Muli", Arial, sans-serif;
}
.buttons > button{
  margin-right:30px;
} 
.btn-gradient{
  background:#1462ff;
  color:#fff;
  border-radius: 12px;
  padding:12px 48px;
  box-shadow: 0 6px 30px -10px #4a74c9;
  transition:all 0.5s ease;
  border:0;
  letter-spacing:1px;
  text-transform: uppercase;
}
.btn-gradient:hover{
  box-shadow: 0 0 0 0 rgba(0,40,120,0);
  transform:scale(0.93);
}
.gradient2{
  background-image: linear-gradient(60deg, #4aa5fb 10%, #1ccafa 50%, #00e1f9 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0px;
}
.gradient2:hover{
  border-top-left-radius: 0px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 12px;
}
.gradient3{
  background-image: linear-gradient(60deg, #8c38fe 10%, #b72ee4 50%, #9c66e5 100%);
  box-shadow: 0 2px 25px 0 rgba(111, 30, 138, 0.35);
}
.gradient3:hover{
  box-shadow: 0 10px 30px 0 #8c38fe, 0 5px 0 0 #9c66e5;
  transform:translateY(-5px);
}
.gradient4{
  background-image: linear-gradient(60deg, #43fa84 10%, #3afec0 50%, #38fee3 100%);
  box-shadow: 0 2px 25px 0 rgba(56,254,227,0.35);
}
.gradient4:hover{
  box-shadow: 0 10px 12px 0 #48f184b5, 0 8px 2px 0 #57b396;
  transform: rotateX(50deg);
}

Step 2. Adding HTML Codes

Now copy following HTML codes and paste to post/page where you want to add Gradient Buttons. 


  <div class="buttons">
    <button class="btn btn-gradient"><a href='#'>Hover me</a></button>
    <button class="btn btn-gradient gradient2"><a href='#'>Hover me</a></button>
    <button class="btn btn-gradient gradient3"><a href='#'>Hover me</a></button>
    <button class="btn btn-gradient gradient4"><a href='#'>Hover me</a></button>
  </div>
  • Change the highlighted parts as per your liking.

Now, Animated Gradient Hover Button are added and working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.

Important Note: All rights reserved to respected copyright owner. If your copyrighted material has been indexed by our website and you want this material to be removed then contact us immediately. We will remove it within 48 hours.

Posting Komentar