post

Borda botão gradiente com CSS (button border gradient)

Publicado em: 11/11/2022

Categorias: BlogCSS

Solução 1

Nesta solução abaixo, o fundo do botão é disfarçado para combinar com o fundo da pagina.

.botao-degrade-sem-fundo {
  border-radius: 100rem;
  padding: 1rem;
  font-size: 1rem;
  padding: .5rem 3rem;
  color: #fff;
  border: solid 3px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #78e4ff, #ff48fa);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px #fff inset; /* Responsavel pela cor de dentro. Recomenda usar a mesma cor do fundo da pagina */
}

.botao-degrade-sem-fundo:hover {
  box-shadow: none;
  color: white;
}

Solução 2

Nesta solução, não é criado uma borda no botão, mas sim é criado um objeto que se passa por borda, e que ficara atrás do botão.

.botao-degrade-sem-fundo::before {
    content: "";
    background: transparent;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border: 3px solid;
    border-image: linear-gradient(90deg, #0001ff, #ff0066) 1;
    position: absolute;
}

.botao-degrade-sem-fundo {
    background: transparent !important;
    position: relative;
}

Teste as soluções apresentadas a cima, para ver qual funciona melhor para você.

Espero ter ajudado.

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2136

ID de Referência: 2136

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários