Embossed button in CSS3

This is a simple CSS tutorial for making embossed button. No image is required.
First let’s do HTML part.

<div id="button"><div class="text">Click Me</div></div>

Now let’s do CSS part.

#button{
background: #838383;
border: 1px solid #565656;
border-radius: 10px;
cursor: pointer;
height: 35px;
text-align:center;
width: 150px;
}

.text{
font: bold 22px arial;
color: #000;
text-shadow: 1px 1px 1px #d9d8d8;
margin-top: 4px;
}

And our button will look like this.

Share this post