CSS3 Button For Web Designers: Bright Green Button

• Tweet
• Sharebar

• Tweet

So I’m starting a series of posts that will feature a set of CSS rules for creating an image-less button because like you, I love designs that consists mostly (if not entirely) of CSS.

Click here for more buttons

For my first button of the series, above is a link dressed in CSS that transforms it to a bright green button. Well, the idea behind it is simply because GREEN generally means GO. Also, if you hover over it, it turns brighter and looks more enticing to click. Because of its brightness, I used this button before as form submission button.

Here is the code. Please feel free to modify the style as you see fit.

.bright-green-button {
 background: #7fb308;
 color: #fff;
 border: solid 3px #a2e40a;
 text-shadow: 0 -1px #517205;

 position: relative;
 text-decoration: none;
 padding: 8px 10px;
 text-transform: uppercase;
 text-align: center;
 cursor: pointer;

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 border-radius: 10px;
}
.bright-green-button:hover {
 background: #a2e40a;
 color: #517205;
 text-shadow: none;
}

Just a quick note, if you find that the button’s appearance doesn’t turn out like the one up here, there must be conflicting styles between the code here and your theme. What I do is use the almighty !important to easily establish priority for the given style.

Another tip: Since some styles here are not supported by older browsers (particularly that of Internet Explorer), I suggest that you use scripts like CSS3 PIE to make it compatible.