Skip to content

Instantly share code, notes, and snippets.

@karlgroves

karlgroves/button styling

Last active December 21, 2015 08:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save karlgroves/6281550 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save karlgroves/6281550 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
button styling
<style type="text/css">
.button {
background: #65a9d7;
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
padding: 13px 26px;
border-radius: 40px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 23px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
</style>
<a href="#" class="button">Search</a>
@karlgroves
Copy link
Author

karlgroves commented Aug 25, 2013

Note: While this makes a very pretty button, it isn't actually a button.

Links are meant to navigate. Buttons are meant to trigger an action. So, if you're using this code for a thing that navigates: cool. If you're using this for something that triggers an action, then change to a element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment