Material Radio Button

Dropdown Menu Bar on Hover

Author

Live 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

Leave A Reply