Eu não sei direito se entendi o que vc quer, mas em vez de usar border
vc pode usar o box-shadow
com valores como spread-radius
e inset
para fazer esses efeitos. Pro .btn
basta usar um transition
junto :hover
, já pro input
vc precisa fazer um @keyframes
alternate
para fica pulsando.
OBS: No .btn
coloquei uma "borda" de cada cor, para vc ver que uma cresce para dentro inset
, e outra para fora:
.btn {
box-sizing: border-box;
padding: 1em;
background-color: black;
color: #fff;
font-family: sans-serif;
font-size: 1rem;
box-shadow: inset 0 0 0 1px red,
0 0 0 1px blue;
transition: box-shadow 500ms linear;
}
.btn:hover {
box-shadow: inset 0 0 0 4px red,
0 0 0 4px blue;
}
.glow {
border: 0;
box-shadow: 0 0 0 0 red;
animation: glow-box 1s linear infinite alternate;
}
@keyframes glow-box {
to {
box-shadow: 0 0 0 5px red;
}
}
<br>
<a class="btn" href="#">
<span>Meu BTN</span>
</a>
<br><br><br>
<input class="glow" type="text">
Aqui tem a documentação completa da Mozilla sobre o box-shadow
, deve te interessar: https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-shadow
Essa pergunta sobre múltiplas bordas em um elemento pode te interessar tb: Como ter mais de uma Borda em um Elemento com CSS