CSS3 Button For Web Designers: Bright Green Button

  • SumoMe

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.

About maca

Hello, my name is Karlo Macariola. I once dreamed to be a painter or an animator but when I typed my first line of code I immediately fell in love with programming. Today my passions are with web development and web design though sometimes I still withdraw to my first love which is drawing. DeviantArt | Twitter | Facebook
This entry was posted in Web Development & Design and tagged . Bookmark the permalink.

2 Responses to CSS3 Button For Web Designers: Bright Green Button

  1. Aj Banda says:

    I believe that your radius styling won’t work on IE. But since your just focusing on the hover effect, I think it already looks good that way. Anyway, I think you may want to add shadow effect on the box to give it a 3d effect.

    Overall, good way to show off some code! Cheers! 🙂

    • maca says:

      Thanks for the suggestions Aj! I will make sure to include that in my next CSS button. 🙂

      You can use a script like CSS3 PIE to support new style definitions like border-radius particularly in IE.

      Cheers!

Leave a Reply to maca Cancel reply

Your email address will not be published. Required fields are marked *