Some cool super fancy CSS2 HTML buttons
You need good looking HTML buttons. Buttons should work in all modern browsers the same. Ideally, you need CSS2 buttons, but you may add some CSS3 effects in the future.
Here is the solution for you, after a great search I found really good buttons that you may modify for your own needs.
.btn_cool {
display: block;
cursor: pointer;
padding: 6px 15px;
text-align: center;
font: bold 13px/150% "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #ffffff;
text-decoration: none;
border-radius: 3px;
border: 1px solid #000000;
text-shadow: 0px -1px 0px #000000;
/*Shadows*/
-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.25), 0px 1px 2px rgba(0,0,0,0.25);
-webkit-shadow: inset 0px 1px 0px rgba(255,255,255,0.25), 0px 1px 2px rgba(0,0,0,0.25);
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.25), 0px 1px 2px rgba(0,0,0,0.25);
/*Gradient*/
background: #4a4a4a; /* Old browsers */
background: -moz-linear-gradient(top, #4a4a4a 0%, #171717 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a4a4a), color-stop(100%,#171717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4a4a4a 0%,#171717 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4a4a4a 0%,#171717 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4a4a4a 0%,#171717 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#171717',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4a4a4a 0%,#171717 100%); /* W3C */
}
.btn_cool:hover {
background: #5b5b5b; /* Old browsers */
background: -moz-linear-gradient(top, #5b5b5b 0%, #2e2e2e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#2e2e2e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5b5b5b 0%,#2e2e2e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5b5b5b 0%,#2e2e2e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #5b5b5b 0%,#2e2e2e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#2e2e2e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #5b5b5b 0%,#2e2e2e 100%); /* W3C */
}
.btn_cool:active {
background: #171717; /* Old browsers */
background: -moz-linear-gradient(top, #171717 0%, #4a4a4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#171717), color-stop(100%,#4a4a4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #171717 0%,#4a4a4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #171717 0%,#4a4a4a 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #171717 0%,#4a4a4a 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#171717', endColorstr='#4a4a4a',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #171717 0%,#4a4a4a 100%); /* W3C */
}
The final look and feel is like this.
…
tags: & category: -