Similar shadow effect on gmail login screen

Question

How to do for the same shadow effect when clicking on the show/hide equal password button has on the screen login google.

Already tried to do with the pseudo-element :before using :phocus but I was unsuccessful.

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>

Answer 1

My idea here is to use the pseudo-class :active to activate the animation of the element just click. According to Mozilla see that it is not just the tag <a> or <button> that can the :active, actually even a tag <h1> or <p> can receive this pseudo-class

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 "To pseudo-class :active is also commonly used when using the key tab keyboard. It is frequently used in HTML elements <a> and <button>, but may not be limited only to them."

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

---

Now let’s get down to business.

As said the :active can be used in various elements, so I used a <label> with a for to trigger a checkbox that depending on the state :checked or will not change the "button" icon. Already with the :active I will fire the animation whenever the element is clicked.

Within the label I have two icons, one is hidden and the other appears, when I change the checkbox for :checked i hide the icon that was visible and hidden what was already appearing.

See the image template code:

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>