botão radio

Olá Shayron, tudo bem?

Estou procurando uma solução adequada e em breve te retorno.

Bons estudos!

Olá Shayron, tudo bem?

Para personalizar o botão rádio, nós iremos precisar ocultar o botão padrão do navegador e criaremos um novo botão rádio para ser estilizado.

1º PASSO: Iremos criar um container que irá englobar todos os botões, através de uma class que será aplicada em todas as "etiquetas"(label) que os representam. Além disso, vamos criar a class="checkmark", que estará dentro desse container e será utilizada para personalização.

No HTML ficará assim:

<label class="container">Botão 1
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

<label class="container">Botão 2
    <input type="radio" name="radio">
    <span class="checkmark"></span>
</label>

2º PASSO: Em seguida, nós iniciaremos a estilização no CSS começando pelo container. Nós aplicaremos estilos que farão os botões se disporem em bloco, no local correto, com uma margem adequada entre os botões e os textos e entre um botão e outro.

.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
font-size: 22px; 
}

3º PASSO: precisamos ocultar a opção padrão de botão do navegador, faremos isso tornando esse botão invisível.

.container input {
opacity: 0;
}

4º PASSO: Iremos criar o novo botão rádio e começaremos as primeiras estilizações! Será necessário colocar outras características além da cor, como por exemplo a altura, largura, posicionamento e a borda que tornará-lo redondo. Vejá como ficará:

.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}

5º PASSO: Ao passar o mouse encima do botão rádio, ele modificará a cor.

.container:hover input ~ .checkmark {
background-color: #ccc;
}

6º PASSO: Quando o botão rádio for clicado, adicionamos uma outra cor!

.container input:checked ~ .checkmark {
background-color: #2196F3;
}

E assim, o botão rádio está criado e finalizado.

Espero ter ajudado, qualquer dúvida só falar. Bons estudos!