How to achieve exact radio button style design? - html

Question

I am sharing an image of button can some one help with the html css to achieve exact design.
Normal state of radio button
On hover style or Checked state

Answer 1

html code:
<div class="radio-button">
<input class="radio-button__input" type="radio" name="" id="btn">
<label class="radio-button__label" for="btn">Text here</label>
</div>
css code:
.radio-button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.radio-button__input{
display: none;
}
.radio-button__label{
border: .1em solid gray;
font-size: 48px;
padding: .5em;
border-radius: 2em;
}
.radio-button__input:hover + .radio-button__label, .radio-button__input:checked + .radio-button__label{
background-color: mediumvioletred;
}
styling on .radio-button is only to center it so you can delete it if you need to
if you want the transition to be smooth just add transition on .radio-button__label

Answer 2

*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: "Roboto", sans-serif;
}
.radio input {
display: none;
}
.radio-box {
padding: 15px 30px 12px;
border-radius: 50px;
color: #868aa8;
border: 2px solid #868aa8;
text-transform: uppercase;
font-size: 34px;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s linear;
display: inline-block;
margin: 0 5px;
}
.radio input:checked + .radio-box,
.radio-box:hover {
color: #fff;
background-color: #ea0b5b;
border-color: #ea0b5b;
}
<label class="radio">
<input type="radio" name="time">
<span class="radio-box">5:30 PM</span>
</label>