1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make "Buy Now" Image have coloured background

Discussion in 'CSS' started by WebDev Solutions, Nov 24, 2015.

  1. #1
    Hi,

    We are looking to try and ensure our 'Buy Now' buttons POP off the page and appear eye catching. At present,the buttons are transparent and the website background shows through. I would prefer the backdrop to be perhaps white or cream to catch the eye.

    Website: http://www.glitterretribution.co.uk/
    SEMrush
    I assume this is a fairly simple fix via CSS - can somebody shed light for me?
     
    WebDev Solutions, Nov 24, 2015 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Change the background on the buttons from transparent / none to whatever color you want? It should be one line of CSS.
     
    PoPSiCLe, Nov 24, 2015 IP
  3. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #3
    Thanks for your response. In style.css I find this;

    
    /* Button */
    
        input[type="submit"],
        input[type="reset"],
        input[type="button"],
        .button {
            -moz-appearance: none;
            -webkit-appearance: none;
            -o-appearance: none;
            -ms-appearance: none;
            appearance: none;
            -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            background-color: #3ba666;
            border-radius: 4px;
            border: 0;
            color: #ffffff !important;
            cursor: pointer;
            display: inline-block;
            font-weight: 400;
            height: 2.85em;
            line-height: 2.8em;
            padding: 0 2em;
            text-align: center;
            text-decoration: none;
            white-space: nowrap;
    Code (markup):
    Any help?
     
    WebDev Solutions, Nov 24, 2015 IP