How to achieve exact radio button style design?-CodePudding

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

CodePudding user response：

html code:

<div >
    <input  type="radio" name="" id="btn">
    <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

CodePudding user response：

*,
*::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 >
  <input type="radio" name="time">
  <span >5:30 PM</span>
</label>