Glossy Little Light Bulb Buttons with CSS3

Log-in or register.
No older entries »« No newer entries

Glossy Little Light Bulb Buttons with CSS3

Published by 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 :-D. 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

user icon Anonymous
I wish there were...
Select background
What about ICL files?
Vista & Win 7 icons