How to Style a Checkbox to Look Like a Button with a Hover Effect?

Styling a Checkbox to Look Like a Button with Hover Effect

Creating custom-styled UI elements can enhance the user experience. In this case, you want to replace a checkbox with a button-like appearance, and additionally, you wish to implement a hover effect to improve interaction.

The HTML Structure:

<code class="html"><div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div></code>

The CSS Styles:

To style the checkbox as a button and implement the hover effect, you can use the following CSS:

<code class="css">div label input {
   margin-right:100px;
}

body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

#ck-button:hover {
    background:red;
}</code>

Hover Styling:

The key to adding the hover effect is the following CSS:

<code class="css">#ck-button:hover {
    background:red;
}</code>

This specifies that when the user hovers over the button-styled checkbox, the background will change to red.

Live Example:

See the live example in the following fiddle:

http://jsfiddle.net/zAFND/4/

The above is the detailed content of How to Style a Checkbox to Look Like a Button with a Hover Effect?. For more information, please follow other related articles on the PHP Chinese website!