Css Gradient Border

Css Gradient Border

Como criar bordas de gradiente em CSS.

Veja como você pode aplicar um gradiente a uma borda usando somente css. com propriedade border-image semelhante a como é feito com gradientes de fundo.

O (1) após a declaração de gradiente linear é o valor da fatia da imagem da borda. Ao usarmos o N° 1, especificamos que queremos uma única região de borda.

A desvantagem dessa abordagem é que você não não pode aplicar o border-radius.

Entretanto podemos fazer e efeito de Gradient Border de outra forma. mais isso veremos em outro artigo em breve.

Seguindo o tutorial – Vamos Adicionar o Html

  <div class="btn-centraliza">                
     <a href="#" class="botao-gradient" title="Leia mais">Leia mais</a>              
  </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o Botão e dar o efeito de gradiente .

.btn-centraliza {

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;

}

.botao-gradient{

  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  color: #000000;
  font-weight: bold; 
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-decoration: none;
  border-width: 3px;
  border-style: solid;
  border-image: linear-gradient(to right, #4395ff, #fffb12, #f00808) 1;

}

Combinando as Duas seções acima Html + Css temos o seguinte Resultado!

Como criar bordas de gradiente em CSS.

Veja o Resultado baixo!

Baixar Código Veja Funcionando