Anonymous
Glossy Little Light Bulb Buttons with CSS3
No older entries »« No newer entries
Glossy Little Light Bulb Buttons with CSS3
Published by absterninja on June 4th 2012.
For any web designers out there:
I am completely recoding the website I designed, abbysawesome.com, and I had to make a new button design. It is my summer project 
. After hours of experimentation and debugging, I have created 5 buttons that look like glossy little lightbulb buttons with 3 different sprites: regular, hover, and active. I am putting the code here incase anyone wants to use them.
For a pink button (you can change the color to anything you want):
HTML (yes that is it!):
<a href="yourwebpage.html" class="pink">Pink Button!</a>CSS (A lot more...):
a {text-decoration: none;color: black;cursor: link-select;}
a:hover {text-decoration: none;color: black;cursor: link-select;}
a:active {text-decoration: none;color: black;cursor: link-select;}
a.button {
display: inline-block;
font-weight: bold;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
width: 125px;
height: 35px;
text-align: center;
font-size: 15pt;
padding-top: 10px;
}
a.button.pink {
text-shadow: 0px 1px 0px #ffffd8, 0px -1px 0px #260013;
background: -moz-linear-gradient(top, rgba(242,225,233,1) 0%, rgba(239,186,213,0.75) 50%, rgba(229,156,192,0.75) 51%, rgba(255,0,127,0.5) 100%);
background: -webkit-linear-gradient(top, rgba(242,225,233,1) 0%,rgba(239,186,213,0.75) 50%,rgba(229,156,192,0.75) 51%,rgba(255,0,127,0.5) 100%);
background: linear-gradient(top, rgba(242,225,233,1) 0%,rgba(239,186,213,0.75) 50%,rgba(229,156,192,0.75) 51%,rgba(255,0,127,0.5) 100%);
}
a.button.pink:hover {
text-shadow: 0px 1px 0px #ffffd8, 0px -1px 0px #260013;
background: -moz-linear-gradient(top, rgba(242,225,233,1) 0%, rgba(239,186,213,1) 50%, rgba(229,156,192,1) 51%, rgba(255,0,127,1) 100%);
background: -webkit-linear-gradient(top, rgba(242,225,233,1) 0%,rgba(239,186,213,1) 50%,rgba(229,156,192,1) 51%,rgba(255,0,127,1) 100%);
background: linear-gradient(top, rgba(242,225,233,1) 0%,rgba(239,186,213,1) 50%,rgba(229,156,192,1) 51%,rgba(255,0,127,1) 100%);
}
a.button.pink:active {
text-shadow: 0px 1px 0px #ffffd8, 0px -1px 0px #260013;
-moz-box-shadow:inset 0 0 3px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 3px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 3px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
background: -moz-linear-gradient(top, rgba(242,225,233,1) 0%, rgba(239,186,213,1) 50%, rgba(229,156,192,1) 51%, rgba(255,0,127,1) 100%);
background: -webkit-linear-gradient(top, rgba(242,225,233,1) 0%,rgba(239,186,213,1) 50%,rgba(229,156,192,1) 51%,rgba(255,0,127,1) 100%);
background: linear-gradient(top, rgba(242,225,233,1) 0%,rgba(239,186,213,1) 50%,rgba(229,156,192,1) 51%,rgba(255,0,127,1) 100%);
}
Feel free to use these in anyway you like. You can change the colors, fonts, or pretty much anything you want.
To see what they look like in action, go here: http://www.abbysawesome.com
Recent comments
Anonymous