Converting from link images to css only

[hantaah]

It has just been sugested that my call to action orange buttons seen here http://organicwebdesigns.co should be used using css rather than an image.

I very much agree so I have started but am stuck on how to change the text color, make shadows and make the orange button have rounded corner. Can anyone point e in the right direction I have this so far:

my html would simply be:

<a href="http://organicwebdesigns.co/quote" id="cta">You'd better hurry and get in touch</a>

my css is what I need help with let me try:

#cta { display: inline-block; margin-left: 20px; margin-top: 5px; background-color: #e35413; text: #fff; height: 27px; width: 310px; }

Am I close or far and I'm not sure how to do the shadows and corners etc and the text color doesn't seem to work when I put it in firebug ad text size also.

[Stevie D]

It has just been sugested that my call to action orange buttons seen here http://organicwebdesigns.co should be used using css rather than an image.

I very much agree so I have started but am stuck on how to change the text color, make shadows and make the orange button have rounded corner. Can anyone point e in the right direction I have this so far:

my html would simply be:

<a href="http://organicwebdesigns.co/quote" id="cta">You'd better hurry and get in touch</a>

my css is what I need help with let me try:

#cta { display: inline-block; margin-left: 20px; margin-top: 5px; background-color: #e35413; text: #fff; height: 27px; width: 310px; }

Am I close or far and I'm not sure how to do the shadows and corners etc and the text color doesn't seem to work when I put it in firebug ad text size also.

There's no "text" in CSS, you need color:#fff; instead.

You can get rounded corners by using the border-radius property (although there isn't complete agreement on exactly how the specs should be written for this one, so many people use browser-specific features like moz-border-radius, that only matters if you're doing anything complicated like ellipses – for the basics you'll be fine with this). You'll then want to add some padding to give the text room to breathe, especially at the corners.

You can add a shadow with the box-shadow property, which allows you to specify the horizontal offset, vertical offset, blur radius and colour.

Something like this might do the job:

#cta {
    display: inline-block;
    margin: 5px 0 0 20px;
    background-color: #e35413;
    color: #fff;
    height: 27px;
    width: 310px;
    border-radius: 3px;
    padding: 3px;
    box-shadow: 3px 3px 3px #bbb;
}