Material Radio Button using Pure HTML and CSS

Dropdown Menu Bar on Hover

Author

• TechieBundle
• March 19, 2023

Live Demo

• Demo

Code

You can check the code used in the demo below which you can also use in your projects.

HTML

<div class="radio-btn-wrapper">
  <label>
    <input type="radio" name="radio-btn" checked>
    <span class="radio-circle"></span>
    <span class="content">TechieBundle</span>
  </label>
  <label>
    <input type="radio" name="radio-btn">
    <span class="radio-circle"></span>
    <span class="content">HTML</span>
  </label>
  <label>
    <input type="radio" name="radio-btn">
    <span class="radio-circle"></span>
    <span class="content">CSS</span>
  </label>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;500;600;700;900&display=swap");

html,body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: #8e9eab; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    #eef2f3,
    #8e9eab
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    #eef2f3,
    #8e9eab
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: "Nunito", sans serif;
}
.radio-btn-wrapper {
  background: #f2f2f2;
  width: 200px;
  height: 200px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin: 12px 0;
  cursor: pointer;
  position: relative;
}
input {
  position: absolute;
  z-index: -1;
}
.radio-circle {
  width: 16px;
  height: 16px;
  border: 1px solid #242424;
  border-radius: 100%;
  margin-right: 16px;
  position: relative;
}
.radio-circle::before,
.radio-circle::after {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  position: absolute;
  transform: scale(0);
  transform-origin: center center;
}
.radio-circle:before {
  background: #242424;
  transition: 0.4s;
}
.radio-circle::after {
  background: #169b78;
  opacity: 0.4;
  transition: 0.6s;
}
.content {
  color: #242424;
  font-weight: bold;
  width: 100px;
  text-align: left;
}
input:checked + .radio-circle::before {
  transform: scale(0.6);
}
input:hover + .radio-circle {
  border: 1px solid #169b78;
}
input:hover + .radio-circle:before {
  background: #169b78;
}
input:hover ~ .text {
  color: #169b78;
}

Technologies Used

• HTML / CSS

About the code

Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari

Responsive:- Yes

Dependencies: – N/A

Also Check: Dropdown Menu Bar on Hover Using Pure HTML and CSS