How to adjust button css styles - css

Question

I currently have css styles for buttons that look a bit outdated. Here is my css:
a.yellow_button {
font-weight: bold;
font-size: 1.2em;
-moz-border-radius: 14px 14px 14px 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
background: #ffce2e;
color: #444;
text-shadow: 1px 1px 1px rgba(256, 256, 256, 0.9);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
border: 1px solid #444;
cursor: pointer;
text-decoration: none;
padding: 5px 6px;
margin-top: 0;
margin-left:0;
margin-right: 2px;
float:none;
display: inline-block;
}
a.yellow_button:hover {
background: none repeat scroll 0 0 #ff0;
color: #000;
}
You can see these buttons as they currently appear on comehike.com making the site's design kind of old looking.
What I need to do is make the buttons look like the yellow button on the top-right of this mockup:
Any idea which part of the css I should change to get that effect?

Answer 1

Right. This will do it.
.whatever-the-class-is {
/* No border */
border-style:none;
Now for some shadow
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
And the curved border
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
Finally, the gradient. This code is designed to work in alot of browsers.
background: #bfc126; /* Old browsers */
background: -moz-linear-gradient(top, #bfc126 0%, #ffff00 100%); /* Firefox */
background: -webkit-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Chrome, Safari */
background: -o-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Opera */
background: -ms-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* IE */
background: linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Probably should include this aswell */
}
You could create an image of the gradient, but this would take time, and would make the page slower to load.

Answer 2

How about this:
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
or this:
http://css3buttongenerator.com/
Both sites give similar buttons, the first link is probably more relevant, you will just need to make them a bit taller.

Answer 3

Try this:
a.yellow_button {
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-shadow: 1px 1px 1px #fff;
background: #dac303; /* Old browsers */
background: -moz-linear-gradient(top, #dac303 0%, #f1e000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dac303), color-stop(100%,#f1e000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dac303 0%,#f1e000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dac303 0%,#f1e000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dac303 0%,#f1e000 100%); /* IE10+ */
background: linear-gradient(top, #dac303 0%,#f1e000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dac303', endColorstr='#f1e000',GradientType=0 ); /* IE6-9 */
}
That should get you started with the button and the text-shadow for the text. Let me know if you need further assistance!

Answer 4

To create the yellow gradient, you can either use a background image, or you can make use of CSS-gradients, like in this example. You will of course have to change to colors, but something like this:
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
To get the rounded corners you use the CSS border-radius property, reference. It would be something like:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
To get the white 1px text-shadow you can use the CSS text-shadow property, reference. Something like:
text-shadow: 1px 1px 1px #fff;
Notice that there will be limited browser support on this solution, as it is CSS3. Older browsers will ignore the rounded corners and the text-shadow.