|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>CSS Buttons</title> |
|
<style> |
|
/* MAIN BUTTON STYLES */ |
|
.button { |
|
display: inline-block; |
|
margin: 0; |
|
outline: none; |
|
cursor: pointer; |
|
text-decoration: none; |
|
font: bold 11px Arial, Helvetica, sans-serif !important; |
|
letter-spacing: 0; |
|
color: #fff !important; |
|
padding: 0 0.9em 0 .9em; |
|
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); |
|
text-transform: uppercase; |
|
height: 25px; |
|
border-radius: .4em; |
|
border-top: solid 1px #7faf10; |
|
border-left: solid 1px #88b419; |
|
border-right: solid 1px #88b419; |
|
border-bottom: solid 1px #89b61c; |
|
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); |
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); |
|
background: #9cc32d; |
|
background: -moz-linear-gradient(top, #c3d855 1%, #9cc32d 100%); /* FF3.6+ */ |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c3d855), color-stop(100%,#9cc32d)); /* Chrome,Safari4+ */ |
|
background: -webkit-linear-gradient(top, #c3d855 1%,#9cc32d 100%); /* Chrome10+,Safari5.1+ */ |
|
background: -o-linear-gradient(top, #c3d855 1%,#9cc32d 100%); /* Opera 11.10+ */ |
|
background: -ms-linear-gradient(top, #c3d855 1%,#9cc32d 100%); /* IE10+ */ |
|
background: linear-gradient(to bottom, #c3d855 1%,#9cc32d 100%); /* W3C */ |
|
-webkit-transition: color 0.1s ease-in-out; |
|
-moz-transition: color 0.1s ease-in-out; |
|
-o-transition: color 0.1s ease-in-out; |
|
transition: color 0.1s ease-in-out; |
|
} |
|
.button:hover { text-decoration: none; color: rgba(255,255,255,0.75) !important; } |
|
.button:active { position: relative; top: 1px; } |
|
a.button { height: 19px; padding-top: 5px; } |
|
|
|
/* OVERRIDES FOR SPECIAL STATES */ |
|
.button-lg { height: 50px; font-size: 22px !important; } |
|
a.button-lg { height: 38px; padding-top: 10px; } |
|
|
|
.button-blue { |
|
border-top-color: #4399d6; |
|
border-left-color: #4a9dd2; |
|
border-right-color: #4a9dd2; |
|
border-bottom-color: #3384bd; |
|
background: #4399d6; |
|
background: -moz-linear-gradient(top, #6ec1e6 1%, #4399d6 100%); /* FF3.6+ */ |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6ec1e6), color-stop(100%,#4399d6)); /* Chrome,Safari4+ */ |
|
background: -webkit-linear-gradient(top, #6ec1e6 1%,#4399d6 100%); /* Chrome10+,Safari5.1+ */ |
|
background: -o-linear-gradient(top, #6ec1e6 1%,#4399d6 100%); /* Opera 11.10+ */ |
|
background: -ms-linear-gradient(top, #6ec1e6 1%,#4399d6 100%); /* IE10+ */ |
|
background: linear-gradient(to bottom, #6ec1e6 1%,#4399d6 100%); /* W3C */ |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h2>CSS Button examples</h2> |
|
<p>The buttons below are created entirely in CSS with no images. This page loads significantly faster than a page with images too!</p> |
|
|
|
<h3>Normal buttons</h3> |
|
<a class="button" href="#clicked">Click me</a> |
|
<hr> |
|
|
|
<h3>Large buttons</h3> |
|
<a class="button button-lg" href="#clicked">This is a larger button - click me too</a> |
|
<hr> |
|
|
|
<h3>Blue buttons</h3> |
|
<a class="button button-blue" href="#clicked">Click me</a> |
|
<span style="clear:both; display: block; width: 100%; height: 10px;"></span> |
|
<a class="button button-blue button-lg" href="#clicked">This is a larger button - click me too</a> |
|
<hr> |
|
|
|
<p>Both buttons use the same CSS with only the addition of a '.button-lg' class for the second button. The same shadow, gradient and transitions are all added and resized appropriately.<p> |
|
<p>This approach is far more flexible than that of image-based buttons. It looks great on retina devices too!</p> |
|
</body> |
|
</html> |
