Advertisement
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
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

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.