I have been using this hover button on my blog for Demo links. Some of the readers on this blog requested me write a tutorial on making something like this. So, here's the tutorial!
If you don't know what button I am talking about then this is what you are going to make after reading this tutorial :
Hey! Hover me to see the effect
How is it? Lovely, isn't it? If you are a Gmail user then you probably know where this design came from, yup this design is from the Gmail's loading bar. I created the design for buttons when my internet was super slow, I had nothing else to do rather then watching the Gmail's loading bar, so I opened up my developer tools and the notepad, wrote all the CSS properties and next I gave it a hover effect to make it look good and it was ready.
You can also make buttons like this on your blog or website using some small lines of CSS and HTML. Read the following steps to add the button to your site :
The CSS for button
We first need to apply a CSS rule for the buttons to give it style. This is the CSS you need to add to your site :
.mjButton {
color:white !important;
background-color: #6188F5;
text-decoration:none !important;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
margin:4px;
padding:8px;
text-transform:uppercase;
text-decoration:none;
border:1px solid gainsboro;
text-shadow:1px 1px grey;
font-weight:bold;
font-size:11px;
background-position: 21px 37px;
background-size: 65px 45px;
-webkit-transition:all 0.7s ease-in-out;
-moz-transition:all 0.7s ease-in-out;
-ms-transition:all 0.7s ease-in-out;
-o-transition:all 0.7s ease-in-out;
transition:all 0.7s ease-in-out;
}
/* Mouseover State */
.mjButton:hover {
background-position: 21px 37px;
background-size: 999px 45px;
}
Just include this CSS style rule in your stylesheet and the first step is done. If you are using blogger then check this guide on Adding CSS To Your Blogger Blog
The HTML for buttons
After adding the CSS code in your site or blog the next step to create the button on your web pages is to add the HTML. This is the HTML for the button :
<a href="#" class="mjButton">hey! click this</a>
Yup the button is an anchor element so you can easily put URL in it to link to pages. If you change the value of class attribute in the <a> element, you also have to change the selectors in CSS to match it with the class of the HTML element.
If you don't know what button I am talking about then this is what you are going to make after reading this tutorial :
Hey! Hover me to see the effect
How is it? Lovely, isn't it? If you are a Gmail user then you probably know where this design came from, yup this design is from the Gmail's loading bar. I created the design for buttons when my internet was super slow, I had nothing else to do rather then watching the Gmail's loading bar, so I opened up my developer tools and the notepad, wrote all the CSS properties and next I gave it a hover effect to make it look good and it was ready.
You can also make buttons like this on your blog or website using some small lines of CSS and HTML. Read the following steps to add the button to your site :
The CSS for button
We first need to apply a CSS rule for the buttons to give it style. This is the CSS you need to add to your site :
.mjButton {
color:white !important;
background-color: #6188F5;
text-decoration:none !important;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
margin:4px;
padding:8px;
text-transform:uppercase;
text-decoration:none;
border:1px solid gainsboro;
text-shadow:1px 1px grey;
font-weight:bold;
font-size:11px;
background-position: 21px 37px;
background-size: 65px 45px;
-webkit-transition:all 0.7s ease-in-out;
-moz-transition:all 0.7s ease-in-out;
-ms-transition:all 0.7s ease-in-out;
-o-transition:all 0.7s ease-in-out;
transition:all 0.7s ease-in-out;
}
/* Mouseover State */
.mjButton:hover {
background-position: 21px 37px;
background-size: 999px 45px;
}
Just include this CSS style rule in your stylesheet and the first step is done. If you are using blogger then check this guide on Adding CSS To Your Blogger Blog
The HTML for buttons
After adding the CSS code in your site or blog the next step to create the button on your web pages is to add the HTML. This is the HTML for the button :
<a href="#" class="mjButton">hey! click this</a>
Yup the button is an anchor element so you can easily put URL in it to link to pages. If you change the value of class attribute in the <a> element, you also have to change the selectors in CSS to match it with the class of the HTML element.
