Enjoy unlimited access to all forum features for FREE! Optional upgrade available for extra perks.

Optimised Buttons

Discussion in 'Website Design' started by Aegean, Jun 15, 2012.

Thread Status:
Not open for further replies.
  1. Aegean Greece

    Aegean Active Member

    Joined:
    Feb 2011
    Posts:
    740
    Likes Received:
    16
    I received an email from an AD member last week asking me if it was possible to create a coloured button on his website that contained optimised text, without using images. This can be done easily using CSS3, so I thought I'd post it here just in case its of help to anyone else.

    If you have site visitors who use older browsers that do not support CSS3, you can use a fallback image.

    Firstly, put the following in your sites CSS file:

    Code:
    /* Overall CSS Button Style */
     .button {
         background: #777;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
         -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
         box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
         cursor: pointer;
         display: inline-block;
         overflow: hidden;
         padding: 1px;
         vertical-align: middle;
         }
     .button span {
         border-top: 1px solid rgba(255, 255, 255, 0.25);
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         color: #fff;
         display: block;
         font: bold 12px 'Arial', sans-serif;
         padding: 6px 12px;
         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
         }
         
    /* CSS Button States */
     .button:hover {
         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.1)));
         background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
         text-decoration: none;
         }
     .button:active {
         -moz-box-shadow: none;
         -webkit-box-shadow: none;
         box-shadow: none;
         background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.2)));
         background-image: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.2));
         }
     .button:active span {
         border-top-color: rgba(0, 0, 0, 0.2);
         }
         
    /* Colours and Sizes */
     .button.black { background-color: #252a2a; }
     .button.blue { background-color: #3792c6; }
     .button.red { background-color: #cc2222; }
     .button.green { background-color: #69a846; }
     .button.brown { background-color: #b6761a; }
     .button.selected { background-color: #569334; }
     .button.large span { font-size: 16px;  padding: 6px 14px; }
     .button.small span { font-size: 11px;  padding: 4px 8px; }
    Then in the code of your page, use the following for your button, changing the colour etc as you need to:

    Code:
    <a href='http://www.yourlink.co.uk' class='button blue'><span>Optimised Text Here</span></a>
    Or with a size and padding:

    Code:
    <a href=''http://www.yourlink.co.uk' class='button large blue'><span>Optimised Text Here</span></a>

    If you use WP this may be built into your template, so you won't need it, but if you use HTML this will let you insert your optimised anchor text into your button with no images.
     
    Last edited: Jun 15, 2012
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
    IWA Meetup
     
  3. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,607
    Likes Received:
    493
  4. Aegean Greece

    Aegean Active Member

    Joined:
    Feb 2011
    Posts:
    740
    Likes Received:
    16
    Thanks for putting up the preview seemly, I forgot to illustrate what I was talking about!
     
  5. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,607
    Likes Received:
    493
    No worries.

    I just know that some people like to see what you are talking about - especially when it is something they are unable to visualise in their minds or don't understand what is happening. :)
     
  6. fish United Kingdom

    fish Well-Known Member

    Joined:
    Nov 2006
    Posts:
    2,710
    Likes Received:
    27
    if you are using WP, there's a fab plugin called jshortcodes which perform the same job (and others) very nicely.
     
  7. Annife

    Annife Member

    Joined:
    Jun 2012
    Posts:
    9
    Likes Received:
    0
    Looking really great! Thanks for the post.

    Im using little different, but mine have some issues in IE.
     
  8. devilsrefugee

    devilsrefugee Active Member

    Joined:
    May 2012
    Posts:
    245
    Likes Received:
    3
Thread Status:
Not open for further replies.