CSS3 Snippet - Everything To Button

Posted at

text-decoration: none;
padding: 2pt 8pt;
display: inline-block;
border: 1px solid gray;
border-radius: 5px;
outline: none;
[button]{ background-image: linear-gradient(white, gray); }
[button]:hover{ background-image: linear-gradient(gray, white); }
[button]:active{ background-image: linear-gradient(gray,gray, white);}

and practically just add a button attribute to anything you want..

<a button ....
<div button ....
<span button ....

- Add cursor: pointer; to the button{ ... style-block, to give a clickable-impression (not required if you are using an already clickable element such as <A>.
- Add user-select: none !important; to the button{ ... style-block, to give a smooth click experience without selecting the text of the button, alternatively you can put the text in button:before{ content: '...HERE...'.