If you are new user for css and would like to make the buttons from css with hover effect. It’s very simple to make Buttons from CSS.

button

Firstly we need to make html code as shown below. I had keep button into div with anchor along span too. If you are thinking why to use span as we can do without span too. But for standard format of button better to keep span too inside anchor.If you want to keep icon on button then that makes easy in future too.But for now we will not keep icon in the button either any background image.
Html Code:
<div class=”button”>
<a href=”#”><span>Click Me</span></a>
</div>

After your HTML is done then it’s time to switch into css code to give design effect. You can see we had declare one class as “button” on html page.So, from that class we will control the button from css. On the below you can see css code . We had used button width 122px even though our button width was 116px.
It’s because we have border of 2px around the button so we will exclude border width same as height too.

CSS Code:


.button a
{
width:112px;
height:25px;
background:#54c416;
border:2px solid #89e855;
color:#f2f6ef;
text-align:center;
display:block;
text-decoration:none
}
.button a span
{
display:block;
padding-top:2px;
font:bold 18px Arial, Helvetica, sans-serif;
}
/* changing background color and text color on hover effect */
.button a:hover
{
background:#5ed91a;
color:#fff;
}

So, we can make a button from css in a minute without using any image. It’s very simple and loads fast in browser too.

Advertisements