Home >Web Front-end >CSS Tutorial >How Can I Make Radio Buttons Look Like Buttons Using Only CSS?
Making Radio Buttons Look Like Buttons
Incorporating radio buttons into a donation form is common, but many prefer a button-like appearance instead of the traditional circle dials. To achieve this, CSS can be utilized effectively, without the need for additional HTML or JavaScript libraries.
Step 1: HTML Structure
Maintain the original HTML structure of the radio buttons. For instance:
<li><input type="radio">
Step 2: CSS Styling
Using CSS, customize the appearance:
/* Reset styles */ .donate-now { list-style-type: none; margin: 25px 0 0 0; padding: 0; } .donate-now li { float: left; margin: 0 5px 0 0; width: 100px; height: 40px; position: relative; } .donate-now label, .donate-now input { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Hide the radio button visually */ .donate-now input[type="radio"] { opacity: 0.01; z-index: 100; } /* Highlight the button when checked */ .donate-now input[type="radio"]:checked+label, .Checked+label { background: yellow; } /* Visual button design */ .donate-now label { padding: 5px; border: 1px solid #CCC; cursor: pointer; z-index: 90; } .donate-now label:hover { background: #DDD; }
Explanation:
With these CSS tweaks, your radio buttons will take on a button-like appearance while retaining their functionality and compatibility with older browsers like IE8.
The above is the detailed content of How Can I Make Radio Buttons Look Like Buttons Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!