Cute as a button

07 June 2011

I constantly find myself styling buttons. The up state is easy, and always designed. The down and hover state, not so much. So I’ve finally come up with a pattern i like.

The Pattern

  • shadow on hover
  • moves a pixel down when active

HTML

<button>Hit me one more time</button>

CSS

button { 
    padding: 10px 20px; 
    text-transform:uppercase; 
    border:2px solid #ccc; 
    background:#eee;
    background:-webkit-linear-gradient(top, #fff, #d1d1d1); 
    background:-moz-linear-gradient(top, #fff, #d1d1d1); 
    background:linear-gradient(top, #fff, #d1d1d1);
    cursor:pointer; 
    text-shadow:0 1px 0 #fff; 
    outline:1px solid #BBB
}
button:hover { 
    -webkit-box-shadow:0 0 5px #777;
    -moz-box-shadow:0 0 5px #777;
    box-shadow:0 0 5px #777
}
button:active { 
    position:relative; 
    top:1px; 
    -webkit-box-shadow:0 -1px 5px #CCC;
    -moz-box-shadow:0 -1px 5px #CCC;
    box-shadow:0 -1px 5px #CCC
}

Demo

You can check out the above code in jsfiddle.

Ohh button button

I’m sorry if you’re now singing Britney Spears.

Matt Sain

Ramblings of a developer, designer and child subscribe

This blog is a public GitHub repository. If you find an error I will not be surprised... but if you fork and edit the blog and send me a pull request you'd be pretty awesome in my book.

Featured Repos