Colorful Stylish Radio Buttons

Written by @kerixa 9 March 2021

We use radio buttons when we want the visitor of our site to fill in a form and choose only one of several items in the form. In most cases, all radio buttons in a form have the same shape and style. In this code example, each radio button is unique with its own style and background color. Enjoy!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
.btn_choose_sent input {
     -webkit-appearance: none;
     display: block;
     margin: 10px;
     width: 18px;
     height: 18px;
     border-radius: 12px;
     cursor: pointer;
     vertical-align: middle;
     box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
     background-color: hsla(0,0%,0%,.2);
     background-image: -webkit-radial-gradient( #fff 0%, #fff 15%, #fff 28%, #fff 70% );
     background-repeat: no-repeat;
     -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1), -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
     outline: none;
}
 .btn_choose_sent input:checked {
     -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1), -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}
 .btn_choose_sent input:active {
     -webkit-transform: scale(1.5);
     -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}
/* The up/down direction logic */
 .btn_choose_sent input, .btn_choose_sent input:active {
     background-position: 0 24px;
}
 .btn_choose_sent input:checked {
     background-position: 0 0;
}
 .btn_choose_sent input:checked ~ input, .btn_choose_sent input:checked ~ input:active {
     background-position: 0 -24px;
}
 .btn_choose_sent {
     background: #EF2D56;
     color: #fff;
     box-shadow: 0 10px 20px rgba(125, 147, 178, .3);
     border: none;
     border-radius: 3px;
     font-size: 16px;
     line-height: 10px;
     padding: 16px 20px 16px 38px;
     text-align: center;
     display: inline-block;
     text-decoration: none;
     margin-right: 30px;
     transition: all .3s;
     height: auto;
     cursor: pointer;
     position: relative;
     outline: none;
}
 .btn_choose_sent input {
     position: absolute;
     left: 0;
     right: 0;
     z-index: 99;
     top: 2px;
}
 .btn_choose_sent input:after {
     position: absolute;
     content: '';
     width: 15rem;
     left: 0;
     right: 0;
    /* background: red;
     */
    /* z-index: -1;
     */
     height: 40px;
     top: -10px;
}
 .bg_btn_chose_1 {
     background-color: #f78968 !important;
}
 .bg_btn_chose_2 {
     background-color: #4e336fdb !important;
}
 .bg_btn_chose_3 {
     background-color: #359dcc !important;
}
/*-=p=--=*/
 .btn_choose_sent_check_b {
     background: #EF2D56;
     color: #fff;
     box-shadow: 0 10px 20px rgba(125, 147, 178, .3);
     border: none;
     border-radius: 3px;
     font-size: 16px;
     line-height: 10px;
     padding: 16px 20px 16px 46px;
     text-align: center;
     display: inline-block;
     text-decoration: none;
     margin-right: 30px;
     transition: all .3s;
     height: auto;
     cursor: pointer;
     position: relative;
     outline: none;
}

</style>
<button type="button" class="btn_choose_sent bg_btn_chose_1">
    <input type="radio" name="name" checked />Chocolate
</button>
<button type="button" class="btn_choose_sent bg_btn_chose_2">
    <input type="radio" name="name" />Cappuccino
</button>
<button type="button" class="btn_choose_sent bg_btn_chose_3">
    <input type="radio" name="name" />Coffee
</button>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300