Here is a quick code snippet that will build a good looking CSS button in 3D, we will be using the CSS : before selector which inserts content before the content of the selected element.
CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#button { width:165px; height:23px; display:block; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #CD7794; padding-top:12px; margin:auto; left:30px; position:relative; border-left: solid 1px #CD7794; background-image: linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); background-image: -o-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); background-image: -moz-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); background-image: -webkit-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); background-image: -ms-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0; -moz-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0; -o-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0; box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0; } |
The :active selector is used to select and style the active link.
|
1 2 3 4 5 6 7 |
#button:active { top:3px; -webkit-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0; -moz-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0; -o-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0; box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0; } |
The :before selector inserts content before a selected element
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
#button:before { content:":-)"; width:35px; height:25px; display:block; position:absolute; padding-top:10px; top:0px; margin-left:-37px; font-size:16px; color:#fff; text-shadow:1px 1px 0px #CD7794; border-right:solid 1px #CD7794; background-image: linear-gradient(bottom, rgb(245,170,2005) 0%, rgb(250,201,220) 100%); background-image: -o-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); background-image: -moz-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); background-image: -webkit-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); background-image: -ms-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%); -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -webkit-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ; -moz-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ; -o-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ; box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ; } |
|
1 2 3 4 5 6 7 |
#button:active:before { top:-3px; -webkit-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ; -moz-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ; -o-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ; box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ; } |
HTML
|
1 |
<div><a id="button" href="#">Pink Button!</a></div> |
Note: For :before to work in IE8, a <!DOCTYPE> must be declared.
