SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Converting from link images to css only

    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.

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by hantaah View Post
    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:
    Code CSS:
    #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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •