Dark Buttons

devilsbackyard

• 10046
• 11
• 0

Dark buttons in pure CSS3 by John Shammas. These buttons are created with the help of basic CSS3 styling techniques that uses box-shadow, linear-gradient, border-radius and text-shadow properties. From the original creation:

These buttons aren't really versatile, it's a balancing act to get all of the glyphs to stay in the centre of the button. If you'd like to use these, the only ones with easily edited text and font attributes are the ones with the word "text" in the classname. The others must stay with their exact CSS properties.

Also, to use these in a line of text (and not by itself in its own little area), you'll need to remove the :active state, and change all of the displays to inline-block. The buttons need to be block elements, otherwise, when the :active state tries to move it down, it will move the entire line.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room