Skip to content

Instantly share code, notes, and snippets.

@jessestu
Last active October 24, 2018 17:23
Show Gist options
  • Save jessestu/427b70d9a78d3bf2c04e6d9713f90ae4 to your computer and use it in GitHub Desktop.
Save jessestu/427b70d9a78d3bf2c04e6d9713f90ae4 to your computer and use it in GitHub Desktop.
Let's create an action button!
/* Styles a call to action button. / @jessestu */
.action-button {
border-top: 1px solid #539fa3;
background: #539fa3;
background: -webkit-gradient(linear, left top, left bottom, from(#74ccd1), to(#539fa3));
background: -webkit-linear-gradient(top, #74ccd1, #539fa3);
background: -moz-linear-gradient(top, #74ccd1, #539fa3);
background: -ms-linear-gradient(top, #74ccd1, #539fa3);
background: -o-linear-gradient(top, #74ccd1, #539fa3);
padding: 15px 30px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
display: inline-block;
font-size: 18px;
text-decoration: none;
vertical-align: middle;
}
.action-button:hover {
border-top-color: #539fa3;
background: #539fa3;
color: #b6e3e4;
}
.action-button:active {
border-top-color: #539fa3;
background: #539fa3;
}
<a href="/contact" title="Schedule your appointment now" class="action-button">Schedule your appointment now</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment