Skip to content
Pure CSS push button
Failed to load latest commit information.
cssbutton.html Added sexy looking companion site for the push it buttons. Jul 19, 2011


Push It - pure CSS push buttons

Check out what these pushovers look like: Demo

Push It has a github page!


How to use

Just download the file and open the button.css file in the css folder or download the repo directly

git clone

In the folder you will also see a button.sass file if you're using compass/sass. This is something I use all the time and makes for easy color scheming of your buttons.

All you need to do is pick a color of yours and then adjust the lightness/darkness of it. For Ex:

  @include background-image(linear-gradient(top center, #0192f7, darken(#0192f7, 15%)))
  // border needs to match the background color of the bevel
  border: solid 1px darken(#0192f7, 20%) 

...and for the bevel area

  background: darken(#0192f7, 20%)

..of course adjust to your liking, but it's as simple as that.

I wish I had a place to host small splash site: cssbutton.html, but right now I don't so I can't share the cool looking splash page.

This is my first github project, so bear with me. I am totally open to questions, suggestions, comments, advice, praise, etc...

Thanks for checking this out!

Something went wrong with that request. Please try again.