How to Make Bevel and Embosed Effect to Button in CSS 3 for Web-Kit Based Browsers

How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

This is possible without the use of extra mark-up through the use of multiple box-shadows:

box-shadow: 
  0 1px 2px #fff, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/

Sample Image

http://jsfiddle.net/NPXfe/

How to make HTML button look pressed in using css?

By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;

Using the :active pseudo class:

button {  background: #ededed;  border: 1px solid #ccc;  padding: 10px 30px;  border-radius: 3px;  cursor: pointer;}
button:active {  background: #e5e5e5;  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;          box-shadow: inset 0px 0px 5px #c1c1c1;   outline: none;}

<button>  Click me</button>

Can I make this silver gradient effect login form using css3?

For gradients Link 1 and Link 2

For bevel emboss effect on button and input : How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

For bevel emboss effect on text

For checkbox styling

remove inner shadow of text input

border-style:solid; will override the inset style. Which is what you asked.

border:none will remove the border all together.

border-width:1px will set it up to be kind of like before the background change.

border:1px solid #cccccc is more specific and applies all three, width, style and color.

Example: https://jsbin.com/quleh/2/edit?html,output

How to Make Bevel and Embosed Effect to Button in CSS 3 for Web-Kit Based Browsers