3

Como fazer para o mesmo efeito de sombra ao clicar sobre o botão de mostrar/ocultar senha igual tem na tela de login do Google.

Já tem tentei fazer com o pseudo-elemento :before usando :focus mas não obtive sucesso.

inserir a descrição da imagem aqui

const btn_password = $(".viewPassword .verSenha");
const input_password = $(".viewPassword input");
btn_password.on('click', function() {
  let type = input_password.attr("type");
  if (type == 'password') {
    input_password.prop('type', 'text');
  }
  if (type == 'text') {
    input_password.prop('type', 'password');
  }
  $(this).toggleClass('ic-visibility-off ic-visibility-on');
  if ($(this).hasClass('ic-visibility-off')) {
    $(this).attr('title', 'Mostrar senha');
  } else {
    $(this).attr('title', 'Ocultar senha');
  }

});
.input {
  width: 270px;
  float: left;
  position: relative;
  display: flex;
  align-items: center;
}

.form-control {
  background-color: #f9fafa;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.64;
  letter-spacing: normal;
  color: #4e5159;
  width: 100%;
  padding: 13px 40px 13px 14px;
  border: solid 1px #f3f5f5;
}

.icon-svg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  object-fit: contain;
  position: absolute;
  right: 15px;
  cursor: pointer
}

.ic-visibility-off {
  width: 18.3px;
  height: 15.8px;
  background-image: url('https://webmachado.com.br/assets/svg/ic-visibility-off.svg');
}

.ic-visibility-on {
  width: 18.3px;
  height: 15.8px;
  background-image: url('https://webmachado.com.br/assets/svg/ic-visibility-on.svg');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <div class="input viewPassword">
    <i class="icon-svg ic-password"></i>
    <input type="password" class="form-control" name="senha" placeholder="Senha">
    <i class="icon-svg verSenha ic-visibility-off" title="Mostrar senha"></i>
  </div>

3
  • Vc se refere a essa sombre envolta do olho quando clica nele? prntscr.com/lr6yi1
    – hugocsl
    Commented 5/12/2018 às 19:34
  • isso mesmo, também queria conseguir replicar este efeito da borda do input, mas por hora só do botão mesmo Commented 5/12/2018 às 19:59
  • Cara bolei uma resposta e deixei os detalhes lá qq coisa é só perguntar. Sobre essa linha abaixo do input realmente seria interessante vc abrir outra pergunta, ou até dar uma pesquisadinha aqui no site pq acho que já vi exemplos disso por aqui
    – hugocsl
    Commented 6/12/2018 às 10:49

1 Resposta 1

2

A minha ideia aqui é usar a pseudo-classe :active para ativar a animação do elemento apenas no clique. Segundo a Mozilla veja que não é apenas a tag <a> ou <button> que pode o :active, na verdade até uma tag <h1> ou <p> pode receber essa pseudo-classe

The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.

PORTUGUÊS "A pseudo-classe :active também é normalmente usada quando se usa a tecla tab do teclado. É freqüentemente usado em elementos HTML <a> e <button>, mas pode não estar limitado apenas a eles."

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/:active


Agora vamos ao que interessa.

Como disse o :active pode ser usado em vário elementos, então eu usei uma <label> com um for para acionar um checkbox que dependendo do estado :checked ou não vai trocar o ícone do "botão". Já com o :active eu vou disparar a animação sempre que o elemento for clicado.

inserir a descrição da imagem aqui

Dentro da label eu tenho dois ícones, um fica escondido e o outro aparecendo, quando eu mudo o checkbox para :checked eu escondo o ícone que estava visível e oculto o que já estava aparecendo.

Veja o código do modelo da imagem:

label {
	margin: 40px;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
}
label:active::before {
	content: "";
	width: 0px;
	height: 0px;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	position: absolute;
	z-index: -1;
	filter: blur(5px);
	animation: anima 250ms forwards linear;
}
@keyframes anima {
	50% {
		width: 40px;
		height: 40px;
	}
}

input:checked + label i.sim{
	display: block !important;
}
input:checked + label i.nao{
	display: none;
}
.sim {
	display: none !important;
}
.nao {
	bottom: block;
}
input {
	display: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<input type="checkbox" name="" id="efeito">
<label for="efeito" class="btnx">
		<i class="material-icons sim">visibility</i>
		<i class="material-icons nao">visibility_off</i>
</label>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .