/* 3 */
.btn-3 {
  background: rgb(0, 172, 238);
  background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
  width: 200px; /* Ajuste a largura conforme necessário */
  height: 50px; /* Ajuste a altura conforme necessário */
  line-height: 50px; /* Centraliza verticalmente o texto */
  padding: 0;
  border: none; /* Remove a borda */
  border-radius: 5px;
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  position: relative; /* Necessário para posicionar os pseudo-elementos */
  overflow: hidden; /* Garante que os pseudo-elementos não saiam do botão */
  font-size: 16px; /* Tamanho da fonte */
  margin-bottom: 10px;
}

.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center; /* Centraliza o texto horizontalmente */
  color: white; /* Cor do texto */
}

.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: rgba(2, 126, 251, 1);
  transition: all 0.3s ease;
}

.btn-3:before {
  height: 0%;
  width: 2px;
}

.btn-3:after {
  width: 0%;
  height: 2px;
}

.btn-3:hover {
  background: transparent; /* Muda o fundo ao passar o mouse */
}

.btn-3:hover:before {
  height: 100%; /* Aumenta a altura do pseudo-elemento ao passar o mouse */
}

.btn-3:hover:after {
  width: 100%; /* Aumenta a largura do pseudo-elemento ao passar o mouse */
}

.btn-3 span:hover {
  color: white; /* Muda a cor do texto ao passar o mouse */
}

.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: rgba(2, 126, 251, 1);
  transition: all 0.3s ease;
}

.btn-3 span:before {
  width: 2px;
  height: 0%;
}

.btn-3 span:after {
  width: 0%;
  height: 2px;
}

.btn-3 span:hover:before {
  height: 100%; /* Aumenta a altura do pseudo-elemento ao passar o mouse */
}

.btn-3 span:hover:after {
  width: 100%; /* Aumenta a largura do pseudo-elemento ao passar o mouse */
}


/* 4 */
.btn-4 {
  width: 130px; /* Largura do botão */
  height: 40px; /* Altura do botão */
  line-height: 42px; /* Centraliza verticalmente o texto */
  padding: 0; /* Remove o preenchimento interno */
  border: none; /* Remove a borda */
  border-radius: 5px;
  background: rgb(0, 172, 238); /* Cor de fundo padrão */
  background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%); /* Degradê azul */
  position: relative; /* Necessário para posicionar os pseudo-elementos */
  overflow: hidden; /* Garante que os pseudo-elementos não saiam do botão */
  color: white; /* Cor do texto */
}

.btn-4:hover {
  color: white; /* Cor do texto ao passar o mouse */
  background: transparent; /* Muda o fundo ao passar o mouse */
  box-shadow: none; /* Remove a sombra */
}

.btn-4:before,
.btn-4:after {
  content: '';
  position: absolute; /* Para posicionamento absoluto */
  top: 0;
  right: 0;
  height: 2px; /* Altura dos pseudo-elementos */
  width: 0; /* Largura inicial */
  background: rgba(2, 126, 251, 1); /* Cor do hover (azul) */
  box-shadow:
   -1px -1px 5px 0px #000,
   7px 7px 20px 0px #0003,
   4px 4px 5px 0px #0002; /* Sombras */
  transition: 400ms ease all; /* Transição suave */
}

.btn-4:after {
  right: inherit; /* Ajusta o lado direito */
  top: inherit; /* Ajusta o topo */
  left: 0; /* Alinha à esquerda */
  bottom: 0; /* Alinha à parte inferior */
}

.btn-4:hover:before,
.btn-4:hover:after {
  width: 100%; /* Aumenta a largura ao passar o mouse */
  transition: 800ms ease all; /* Transição suave */
}

.btn-4 span {
  position: relative; /* Para o efeito de hover */
  display: block;
  width: 100%;
  height: 100%;
}

.btn-4 span:hover:before,
.btn-4 span:hover:after {
  width: 100%; /* Largura total ao passar o mouse */
  transition: 400ms ease all; /* Transição suave */
}