Skip to content

Instantly share code, notes, and snippets.

@karlgroves karlgroves/button styling
Last active Dec 21, 2015

What would you like to do?
<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;
<a href="#" class="button">Search</a>

This comment has been minimized.

Copy link
Owner Author

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
You can’t perform that action at this time.