Radio button hover animation-CodePudding

I'm trying to have a round border around my radio button fade in upon hover. The issue I'm facing is the hover border is being painted on the inside of the button as well as the outside. I'd only like the border on the outside. Additionally, the fade in transition is not working. Some advice appreciated. Thank you.

input[type='radio'] {
  width: 20px;
  height: 20px;
  border: 2px solid #747474;
  border-radius: 50%;
  outline: none;
  opacity: 0.6;
  transition: 0.3s;
}

input[type='radio']:hover:before {
  box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
  border-radius: 50%;
  opacity: 1;
}

input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;    
  border-radius: 50%;
}
    
input[type='radio']:checked:before {
  background: green;
}

<input type="radio">

CodePudding user response：

You can check this code snippet with some explanation

input[type='radio'] {
  width: 20px;
  height: 20px;
  border: 2px solid #747474;
  border-radius: 50%;
  outline: none;
  opacity: 0.6;
  /*transition: 0.3s;*/
}

input[type='radio']:hover:before {
  box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
  border-radius: 50%;
  opacity: 1;
}

input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 10%; /* Keeping margin only 10% */
  padding: 10%; /* Increase the inner area for pushing the border out of the circle */
  border-radius: 50%;
  transition: 0.3s; /* Move your transition to here */
}
    
input[type='radio']:checked:before {
  background: green;
}

<input type="radio">

CodePudding user response：

Transition in before

input[type='radio'] {
  width: 20px;
  height: 20px;
  border: 2px solid #747474;
  border-radius: 50%;
  outline: none;
  opacity: 0.6;
}

input[type='radio']:hover:before {
  box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
  border-radius: 50%;
  opacity: 1;
}

input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;    
  border-radius: 50%;
  transition: 0.3s;
}
    
input[type='radio']:checked:before {
  background: green;
}

<input type="radio">

CodePudding user response：

I find it a bit hacky solution, it might help.

 input[type='radio'] {
            width: 20px;
            height: 20px;
            border: 2px solid #747474;
            border-radius: 50%;
            outline: none;
            opacity: 0.6;
            transition: 0.3s;
        }
input[type='radio']:hover:before {
            box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
            border-radius: 50%;
            opacity: 1;
        }
input[type='radio']:before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;  
            border-radius: 50%;
        }
input[type='radio']:checked:before {
            background: green;
        }

<input type="radio">

CodePudding user response：

added animation and also the hover border is now outside only

 input[type='radio'] {
            /* add margin here of If you want */
            width: 20px;
            height: 20px;
            border: 2px solid #747474;
            border-radius: 50%;
            outline: none;
            opacity: 0.6;
            transition: 0.3s;
        }
input[type='radio']:hover:before {
            box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2); /* control thickens on border here */
            border-radius: 50%;
            opacity: 1;
        }
input[type='radio']:before {
            content: '';
            display: block;
            width: 100%; /* outside border*/
            height: 100%; /* for outside border */
            border-radius: 50%;
            transition:.3s; /* for animation*/
        }
input[type='radio']:checked:before {
            background: green;
        }

<input type="radio">