MyTricksTime

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

• Link – This is the for the default link.
• Visited – This Is the state you give to links which have already been visited.
• Hover – This is the state when the mouse is over the link.
• Active – This is the state you give when the visitor clicks on the link

<a href=”#” class=”web_button”>CSS Button</a>

# Button Link State
This is the default setting for the button, for this we are going to use gradient colours, box shadow and border-radius.

.web_button{
 background: #0.4; /* Old browsers */
 background: -moz-linear-gradient(top,  #b4df5b 0%, #b4df5b 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4df5b), color-stop(100%,#b4df5b)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* IE10+ */
 background: linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
 width:125px;
 padding:20px;
 display:inline-block;
 color:#fff;
 text-decoration:none;
 font-weight:bold;
 text-align: center;
 border:1px solid #8dc025;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -o-border-radius: 5px;
 -webkit-box-shadow: 0px 2px 3px 2px rgba(50, 50, 50, 0.4);
 -moz-box-shadow: 0px 2px 3px 2px rgba(50, 50, 50, 0.4);
 box-shadow: 0px 2px 3px 2px rgba(50, 50, 50, 0.4);
}

# Button Hover State 
On the hover of the button we are going to change the background colour of the button.