post
Borda botão gradiente com CSS (button border gradient)
Publicado em: 11/11/2022
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.