Big Call-to-action button: CSS Example

by on March 7, 2015

big-ol-css-button-press

Big Call-to-action button: CSS Example

  •  
  •  
  •  
  •  

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:

CSS Jetpack button snippet, affordance. Pressable

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
On press, button, sexy tasteful bold button, call to action, cta

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!


  •  
  •  
  •  
  •  
Free Web Design Audiobook

Ready to get started?

Get a free consultation now