Advertisement
Advertisement
Advertisement
Advertisement
by Jeffrey Way
Difficulty:BeginnerLength:QuickLanguages:
In today's video quick tip, we'll use the lesser known inset
parameter when creating CSS3 box shadows to properly style the hover
and active
states of a button.
Remember: don't always be so quick to jump back to Photoshop when you need a few small changes. It's better for you (and the web) if you first ask yourself, "Can we accomplish this with simple CSS?"
Final Source
body { margin: 200px auto; } a { background: url(button.png) no-repeat; width: 130px; height: 130px; margin: auto; outline: none; display: block; text-indent: -10000px; -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -webkit-border-radius: 90px; -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -moz-border-radius: 90px; box-shadow: 0 0 8px 1px rgba(0,0,0,.2); border-radius: 90px; } a:hover { -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 20px 6px rgba(0,0,0,.1); -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 20px 6px rgba(0,0,0,.1); box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 20px 6px rgba(0,0,0,.1); } a:active { -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 20px 6px rgba(0,0,0,.2); -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 20px 6px rgba(0,0,0,.2); box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 20px 6px rgba(0,0,0,.2); }
Advertisement
Advertisement
Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyAdvertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this postPowered by![Native Native]()

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.