skip to Main Content

So I have some radio buttons which I’ve managed to make look like normal buttons using <label>. I would like a slightly transparent image to show over the label button on hover, I have created an image in Photoshop with some transparency. How would I do this? I’ve tried a few ways of my own to no avail.

*Edit sorry there was a typo which I’ve fixed but I think it may be to late :/

<div class="build-now">
    <input type="radio" id="a2" value="a2" name="amount" checked="checked"/>
    <label for="a2">shops <span class="red">text</span></label>
</div>

CSS at the moment

.build-now label {
     -moz-box-shadow: 0px 10px 14px -7px #276873;
    -webkit-box-shadow: 0px 10px 14px -7px #276873;
    box-shadow: 0px 10px 14px -7px #276873;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
}

.build-now label:hover {
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
    background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
    background-color:#408c99;
}

2

Answers


  1. your class name wrong html class name .build or css class name .build-now

    Demo Link https://jsfiddle.net/y4n1rnbr/

    Login or Signup to reply.
  2. In html section change class name to build-now

    .build-now label {
         -moz-box-shadow: 0px 10px 14px -7px #276873;
        -webkit-box-shadow: 0px 10px 14px -7px #276873;
        box-shadow: 0px 10px 14px -7px #276873;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
        background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
        background-color:#599bb3;
        -moz-border-radius:8px;
        -webkit-border-radius:8px;
        border-radius:8px;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:Arial;
        font-size:20px;
        font-weight:bold;
        padding:13px 32px;
        text-decoration:none;
        text-shadow:0px 1px 0px #3d768a;
    }
    
    .build-now label:hover {
         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
        background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
        background-color:#408c99;
    }
    <div class="build-now">
        <input type="radio" id="a2" value="a2" name="amount" checked="checked"/>
        <label for="a2">shops <span class="red">text</span></label>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search