Border gradient css

Border gradient css

Como criar um efeito de borda gradient com CSS

Nesta seção, projetaremos uma estrutura simples na tag  <href> para inserir link de destino. 

Usaremos uma classe (.btn-gradient) para dar o formato do botão e o efeito gradient animado.

Essa é a tag e classe que usaremos para criar o nosso Botão gradient com html e Css

Como criar bordas gradientes em CSS?

Vamos Adicionar o HTML

<a href="#" class="btn-gradient">Saiba mais...</a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o  nosso Botão gradient  com html e css.

.btn-gradient {

    width: auto;
    font-size: 1em;
    padding: 12px 25px;
    border: none;
    outline: none;
    background: #313131;
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 0;
    border-radius: 50px;

}

.btn-gradient::before {
 
  position: absolute;
  content: "";
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  background: linear-gradient(124deg, #e72100, #f36161, #eec647, #dfe404, #35e854, #32dfe9, #4a3df1, #e549f5, #ae07bf );
  background-size: 400%;
  z-index: -1;
  filter: blur(3px);
  animation: move 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 50px;

}

.btn-gradient:hover::before { opacity: 1; }

.btn-gradient::after {

  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #242424;
  left: 0;
  top: 0;
  border-radius: 50px;

}

@keyframes move {

  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado do Botão gradient animado!

Veja o Resultado baixo!

Border gradient css

Baixar Código Veja Funcionando