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

How to achieve this button-border effect with CSS? (image included)

How to achieve this button-border effect with CSS? (image included)

Problem

Right now, our mockups / live demo use images to Achieve this effect (including button text). This is less than desirable for all of the standard reasons. I can get everything working except that pesky outer border. I'd really like to not add markup to my document just to have that.

I've got my test code on jsfiddle, although it doesn't work as well there as it does on my local machine: http://jsfiddle.net/Axtjm/

tldr: how to add Inset border like that and keep rounded corners without extra markup.

Problem courtesy of: Bryan Boettcher

Solution

Use an inset box-shadow. If you're already using a box-shadow on your buttons, remember that you can stack box-shadows by using commas to separate each.

button {
 border: 1px solid #369;
 box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}

The above is just an example; replace the values with your own if necessary. If you want a bolder inset shadow, you can also stack two insets of the same value to achieve that.

Live example: http://jsfiddle.net/Axtjm/5/

Solution courtesy of: Vin Burgh

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 achieve this button-border effect with CSS? (image included)

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×