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/

    I assume this is a fairly simple fix via CSS - can somebody shed light for me?
     
    WebDev Solutions, Nov 24, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    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