Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to make recessed button in CSS

How to make recessed button in CSS

Problem

In the image below, the top image is what I currently have on a site, it uses an actual Image.

What I want to do is make something more like the bottom image using pure CSS, I cannot figure out how to do it though, can anyone help?

Problem Courtesy of: CodeDevelopr

Solution

CSS3 has a lot of solutions. Try this:

div.exampleboxshadowj {
background-color: #EEE;
float: left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width: 160px;
text-align: center;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}

Though you can change the color to blue, if you want.

Here is a great link for all the info you could want.

Solution courtesy of: theJollySin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to make recessed button in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×