Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Thiết Kế Radio Button Cho Website

Cách Thiết Kế Radio Button Cho Website


Ngày 15 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách thiết kế radio button đẹp dành cho website bằng HTML và CSS nhé.

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Thiết Kế Radio Button</title>
</head>
<body>
  <div class="container">
    <div class="title"> Lựa Chọn Môn Học Yêu Thích</div>
    <div class="box">
      <input type="radio" name="select" id="option-1">
      <input type="radio" name="select" id="option-2">
      <input type="radio" name="select" id="option-3">
      <input type="radio" name="select" id="option-4">
      <label for="option-1" class="option-1">
        <div class="dot"></div>
        <div class="text">Toán</div>
      </label>
      <label for="option-2" class="option-2">
        <div class="dot"></div>
        <div class="text">Lý</div>
      </label>
      <label for="option-3" class="option-3">
        <div class="dot"></div>
        <div class="text">Hoá</div>
      </label>
      <label for="option-4" class="option-4">
        <div class="dot"></div>
        <div class="text">Anh Văn</div>
      </label>
    </div>
  </div>
</body>
</html>

CSS

Tiếp theo chúng ta sẽ đi vào thiết kế và tạo hiệu ứng cho radio button bằng CSS nhé!

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
}
.container{
  width: 350px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.container .title{
  color: #fff;
  line-height: 65px;
  text-align: center;
  background: #1E90FF;
  font-size: 25px;
  font-weight: 400;
  border-radius: 10px 10px 0 0;
}
.container .box{
  padding: 20px 30px;
  background: #fff;
  border-radius: 10px;
}

Và kết quả bạn xem hình ảnh ở bên dưới nhé!

Cách Thiết Kế Radio Button

Thiết Lập Radio Button Hoàn Chỉnh

Trong phần này chúng ta sẽ đi vào sử dụng các thuộc tính CSS để căn chỉnh lại cho button này nhé!

.container .box label{
  display: flex;
  height: 53px;
  width: 100%;
  align-items: center;
  border: 1px solid lightgrey;
  border-radius: 50px;
  margin: 10px 0;
  padding-left: 20px;
  cursor: default;
  transition: all 0.3s ease;
}
#option-1:checked ~ .option-1,
#option-2:checked ~ .option-2,
#option-3:checked ~ .option-3,
#option-4:checked ~ .option-4{
  background: #1E90FF;
  border-color: #1E90FF;
}
.container .box label .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
}
#option-1:checked ~ .option-1 .dot,
#option-2:checked ~ .option-2 .dot,
#option-3:checked ~ .option-3 .dot,
#option-4:checked ~ .option-4 .dot{
  background: #fff;
}
.box label .dot::before{
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
#option-1:checked ~ .option-1 .dot::before,
#option-2:checked ~ .option-2 .dot::before,
#option-3:checked ~ .option-3 .dot::before,
#option-4:checked ~ .option-4 .dot::before{
  background: #1E90FF;
  transform: translate(-50%, -50%) scale(1);
}
.container .box label .text{
  color: #1E90FF;
  font-size: 18px;
  font-weight: 400;
  padding-left: 10px;
  transition: color 0.3s ease;
}
#option-1:checked ~ .option-1 .text,
#option-2:checked ~ .option-2 .text,
#option-3:checked ~ .option-3 .text,
#option-4:checked ~ .option-4 .text{
  color: #fff;
}
.container .box input[type="radio"]{
  display: none;
}

Và kết quả bạn xem ở video bên dưới nhé!

Còn dưới đây là dự án trên Codepen nha!

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tìm hiểu thêm nhiều thiết kế radio button thì có thể tham khảo ở đây nhé!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo radio button hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.