I found this glorious button when setting up Jetpack for WordPress, and love the pressability. In User Experience… clues that something is clickable are referred to as “affordance.” This button takes advantage of some dynamics associated with the modern flat design feel but isn’t confined by it. It’s a really lovely design.
This is an example of it in action. (Try pressing it – its set up here to bring you somewhere on this page. )
Get Started !
A screenshot on another site:
The HTML
<div class=”converter”><a href=”/your-link”> Get started! </a></div>
The CSS
.converter a {
background: -webkit-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%);
background: -moz-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%);
background: -ms-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%);
background: -o-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%);
background: linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%);
padding: 13px 27px;
border-radius: 5px;
color: #333;
display: inline-block;
position: relative;
padding: 0.64286em 0.85714em 0.53571em;
color: #fff;
font: 400 20px/1 “proxima-nova”, ‘Open Sans’, Helvetica, sans-serif;
background: #518d2a;
z-index: 3;
border-radius: 6px;
box-shadow: 0 6px 0 #3e6c20,0 6px 3px rgba(0,0,0,0.4);
}
.converter a:hover, .converter a:focus {
color: #fff;
background: #57972d;
box-shadow: 0 6px 0 #3e6c20,0 6px 3px rgba(0,0,0,0.4);
}
A photo of it being pressed on another site
The Active CSS (Being Pressed)
.converter a:active {
top: 6px;
box-shadow: 0 0px 0 #3e6c20,0 0 0 rgba(0,0,0,0.4);
}
And of course, change the colors to taste!
