How to Replace Radio Buttons with Clickable Icons

You can replace the radio buttons on a Classic Builder form with clickable images, using only CSS. This example also adds a hover effect and highlights the option the visitor selects.

See the demo page built in Unbounce.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML and CSS.

Set up the icons

1. (Optional) In the form's properties, choose whether the radio buttons display in rows or columns.

   

2. Note the radio button field's name, shown under Field Name and ID. You can keep the generated name or type your own. This example uses icon.

   

3. Upload each icon image to an image host, such as Imgur, AWS, Google Drive, or your own server, and copy each image's URL.
4. Add the following CSS to the Stylesheets section. Replace each instance of icon with your field name, and add your image URLs. The comments in the CSS explain each rule.

<style>
    .option input{
        margin:0;
        padding:0;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    }
    /* Place imugr link here. We do it for Male, Female and Other here.  */
    #ub-option-icon-item-0 > label{
        background-image:url(https://i.imgur.com/1Mgn2bV.png);
    }
    #ub-option-icon-item-1 > label{
        background-image:url(https://i.imgur.com/GbFNNKu.png);
    }
    #ub-option-icon-item-2 > label{
        background-image:url(https://imgur.com/lXwtXAL.png);
    }
    /* Here you can edit the opacity of the images. */
    .option input:active +.opt-label{
        opacity: .9;
    }
    /* Here you want to make sure that there's no filter your images */
    .option input:checked +.opt-label{
        -webkit-filter: none;
        filter: none;
    }
    /* This is where you can style the image that you desire to use with any CSS properties.
    The width and height of your image can be adjusted here. Depending on the images you use, it
    will need adjusting. */
    .opt-label{
        cursor: default;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        width: 70px;
        height: 70px;
        -webkit-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
        -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
        filter: brightness(1.8) grayscale(1) opacity(.7);
    }
    /* Here is where the hover feature is implemented */
    .opt-label:hover{
        -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
        filter: brightness(1.2) grayscale(.5) opacity(.9);
    }
    /* Here we make the label names hidden (Male, Female, Penguin)  */
    #ub-option-icon-item-0 > label> span{
        visibility: hidden;
    }
    #ub-option-icon-item-1 > label> span{
        visibility: hidden;
    }
    #ub-option-icon-item-2 > label> span{
        visibility: hidden;
    }
</style>

Add more options

Each radio option needs its own rules in two places. The first is where the image is set as the background:

#ub-option-icon-item-0 > label{ background-image:url(https://i.imgur.com/1Mgn2bV.png); }

The second is where the option's label text is hidden:

#ub-option-icon-item-0 > label> span{ visibility: hidden; }

If your field has more than three options, copy these rules for each additional option and increase the item number, for example:

#ub-option-icon-item-4 > label{ background-image:url(https://i.imgur.com/image#4here.png); }