Radio Button thường được sử dụng trong form với nhiệm vụ tạo ra một hay nhiều lựa chọn giúp người dùng có thể lựa chọn những thông tin có sẵn do chúng ta đưa ra. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu những thiết kế input radio html đẹp cho trang web nhé!
Các Ví Dụ Radio Và Checkbox HTML
Cách Tạo Radio Button CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Radio Buttons Interaction ✨ by Dronca Raul (@rauldronca) on CodePen.
Cách Thiết Lập Style Cho Radio Button

Kết quả bạn xem bên dưới nhé!
See the Pen Styling radio buttons by Alexander Repeta (@Luxplanjay) on CodePen.
Tạo Hiệu Ứng Liquid Cho Radio Button

Kết quả bạn xem bên dưới nhé!
See the Pen Liquid Radio Button by Tamino Martinius (@Zaku) on CodePen.
Cách Chỉnh CSS Cho Radio Button HTML

Kết quả bạn xem bên dưới nhé!
See the Pen Custom Radio Buttons by Dronca Raul (@rauldronca) on CodePen.
Tạo Hiệu Ứng Animation Cho Checkbox Và Radio Button

Kết quả bạn xem bên dưới nhé!
See the Pen Ripple animation on input type radio and Checkbox by WILDER TAYPE (@wilder_taype) on CodePen.
Thiết Kế Radio Button Theo Kiểu Google

Kết quả bạn xem bên dưới nhé!
See the Pen Google Dots Radio Buttons by Victor Freire (@victorfreire) on CodePen.
Tạo Radio Checked Button CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Radio checked style by Volker Otto (@l4ci) on CodePen.
Thiết Kế Radio Button Theo Kiểu Neumorphic

Kết quả bạn xem bên dưới nhé!
See the Pen Neumorphic Radio by halvves (@halvves) on CodePen.
Tạo Hiệu Ứng Chuyển Động Cho Radio Button CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Radio Hopping by Jon Kantner (@jkantner) on CodePen.
Radio Button Dark Và Light

Kết quả bạn xem bên dưới nhé!
See the Pen CSS Only: Custom Radio Buttons by Abubaker Saeed (@AbubakerSaeed) on CodePen.
Hiệu Ứng Cho Input Radio Bằng CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Input Radio by Andreas Storm (@avstorm) on CodePen.
Thiết Kế Radio Select Bằng Flexbox

Kết quả bạn xem bên dưới nhé!
See the Pen Radio Selects: Flexbox and Fun by Adam Clark (@adamstuartclark) on CodePen.
Tạo Radio Button Với SVG

Kết quả bạn xem bên dưới nhé!
See the Pen SVG Splat Radio Buttons by Chris Gannon (@chrisgannon) on CodePen.
Tạo CSS Radio Button

Kết quả bạn xem bên dưới nhé!
See the Pen CSS radio buttons by Angela Velasquez (@AngelaVelasquez) on CodePen.
Thiết Lập Style Radio Button Input Bằng CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Snacks? Flat radio button inputs... by Kris Hedstrom (@kristofferh) on CodePen.
Thiết Kế Radio Button Bằng CSS Javascript

Kết quả bạn xem bên dưới nhé!
See the Pen Radio Button by Akshat (@akshat46) on CodePen.
Tạo Radio Button Với Icon

Kết quả bạn xem bên dưới nhé!
See the Pen Radio Button Big Square [Just CSS] by Gabriel Ferreira (@gabrielferreira) on CodePen.
Thiết Kế Radio Button Bằng HTML CSS

Kết quả bạn xem bên dưới nhé!
See the Pen CSS only custom radio buttons, checkboxes and toggle switches by Nelson Leite (@nelsonleite) on CodePen.
Thiết Kế Radio Groups Theo Kiểu Material

Kết quả bạn xem bên dưới nhé!
See the Pen Material Inspired Checkboxes and Radio Groups by Buddy Reno (@BuddyLReno) on CodePen.
Thiết Lập CSS Cho Radio Button

Kết quả bạn xem bên dưới nhé!
See the Pen Swappy radios by Liam (@liamj) on CodePen.
Tạo Form Radio Button

Kết quả bạn xem bên dưới nhé!
See the Pen Input & Radio-button by Ophelia Fournier-Laflamme (@opheliafl) on CodePen.
Tạo Javasscript Checkboxes Và Radio Buttons

Kết quả bạn xem bên dưới nhé!
See the Pen Fancy Checkboxes and Radio Buttons — with Font Awesome by Jase (@jasesmith) on CodePen.
Tạo Bo Góc Cho Radio Buttons

Kết quả bạn xem bên dưới nhé!
See the Pen Radio Buttons y Checkbox Personalizados y Animados by Carlos Arturo Esparza (@falconmasters) on CodePen.
Tạo Hiệu Ứng Cho Radio Button CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.
Custom Checkboxes Pure CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Accessible Custom Checkboxes with CSS only by Geoffrey Crofte (@GeoffreyCrofte) on CodePen.
Underground radios

Kết quả bạn xem bên dưới nhé!
See the Pen Underground radios by Mikael Ainalem (@ainalem) on CodePen.
Radio button toggle switch

Kết quả bạn xem bên dưới nhé!
See the Pen Radio button toggle switch by Mike Hemberger (@JiveDig) on CodePen.
Custom checkboxes, radio buttons

Kết quả bạn xem bên dưới nhé!
See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.
Material Design Radio Button CSS only

Kết quả bạn xem bên dưới nhé!
See the Pen Material Design Radio Button CSS only by Hannes Kamecke (@hansmaad) on CodePen.
Pill styled radio buttons

Kết quả bạn xem bên dưới nhé!
See the Pen Pill styled radio buttons | Fully scaleable by Håvard Brynjulfsen (@havardob) on CodePen.
Radio Button Cards

Kết quả bạn xem bên dưới nhé!
See the Pen Radio Button Cards by Danielle Romo (@dromo77) on CodePen.
Rolling Radio Buttons

Kết quả bạn xem bên dưới nhé!
See the Pen Rolling Radio Buttons by Jon Kantner (@jkantner) on CodePen.
CSS3 Checkbox Styles

Kết quả bạn xem bên dưới nhé!
See the Pen CSS3 Checkbox Styles by Brad Bodine (@bbodine1) on CodePen.
Bootstrap Radio buttons Và Checkboxes

Kết quả bạn xem bên dưới nhé!
See the Pen Touch Friendly Bootstrap Radio buttons and Checkboxes by Brian Sassaman (@BrianSassaman) on CodePen.
Radio Group HTML

Kết quả bạn xem bên dưới nhé!
See the Pen Checkboxes and radios (dark/light) - pure css - #06 by Ivan Grozdic (@ig_design) on CodePen.
CSS only input radio select concept

Kết quả bạn xem bên dưới nhé!
See the Pen CSS only input radio select concept by web-tiki (@web-tiki) on CodePen.
Google material style checkbox

Kết quả bạn xem bên dưới nhé!
See the Pen Google material style checkbox (css only) by Sam (@Sambego) on CodePen.
Animated CSS3 Checkbox

Kết quả bạn xem bên dưới nhé!
See the Pen Animated CSS3 Checkbox by Jimmy Gillam (@theigmo87) on CodePen.
Custom checkbox

Kết quả bạn xem bên dưới nhé!
See the Pen Custom checkbox by Valery (@valerypatorius) on CodePen.
Todo List Checkbox Animation

Kết quả bạn xem bên dưới nhé!
See the Pen ☑️ CSS-only Todo List Checkbox Animation by Shaw (@shshaw) on CodePen.
Radio button css codepen

Kết quả bạn xem bên dưới nhé!
See the Pen 2020 Toggles by Aaron Iker (@aaroniker) on CodePen.
Pure CSS Fancy Checkbox/Radio

Kết quả bạn xem bên dưới nhé!
See the Pen Pure CSS Fancy Checkbox/Radio by Raúl Barrera (@raubaca) on CodePen.
Wobble Checkboxes

Kết quả bạn xem bên dưới nhé!
See the Pen Wobble Checkboxes by Tamino Martinius (@Zaku) on CodePen.
Checklist animation

Kết quả bạn xem bên dưới nhé!
See the Pen Checklist animation - Only CSS by Milan Raring (@milanraring) on CodePen.
Checkbox Input Group

Kết quả bạn xem bên dưới nhé!
See the Pen chippy checkbox inputs by Adam Quinlan (@quinlo) on CodePen.
Checkbox HTML checked

Kết quả bạn xem bên dưới nhé!
See the Pen Checkbox by Mohammadreza Ziadzadeh (@moharnadreza) on CodePen.
Bài viết liên quan:
- Input CSS Javascript Đẹp Cho Website
- Thay Đổi Màu Cho HTML5 Input
- Toggle Switch Buttons Cho Thiết Kế Website
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những radio button hữu ích dành 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ẻ!