0

Preciso fazer um botão com o border e o text color gradient, porém o botão também tem border-radius. Já tentei diversas formas aqui, mas não obtive exito. Qual a melhor forma de fazer esse botão?

O botão é esse:

inserir a descrição da imagem aqui

O que tenho até o momento:

https://jsfiddle.net/jsalves/ca0ezhdx/

2

3 Respostas 3

0

Isso chega bem próximo do que você precisa:

.botao {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-family: Sans-serif;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  margin: 10px;
  z-index: 0;
}
.botao span {
  text-transform: uppercase;
  font-size: 16px;
  position: relative;
  z-index: 0;
  background: linear-gradient(to right, #4382c9, #5bafe4); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.botao:before {
  content: '';
  background: linear-gradient(to right, #4382c9, #5bafe4); 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
}
.botao:after {
  content: '';
  background: #fff;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  position: absolute;
  border-radius: 8px;
  z-index: -1;
}
<a href="" class="botao"><span>Conheça</span></a>

5
  • Realizando os testes por aqui, funcionou certinho, mas na hora de aplicar no código, não funciona. Vou ver o que tá pegando por aqui. Valeu pela ajuda! :D Commented 24/08/2017 às 13:10
  • Aparentemente o problema que tenho aqui é com o z-index dos pseudo-elements Commented 24/08/2017 às 13:17
  • Neste caso, para aplicar um z-index no botão será necessário encapsular o texto em outra tag, no exemplo eu coloquei em um span] Commented 24/08/2017 às 14:01
  • Agora foi! O botão está encapsulado em uma div com background, quando eu tirava o background dessa div o botão ficava certo. Agora encapsulando o texto do botão deu certo também. Valeu pela ajuda! :D Commented 24/08/2017 às 14:15
  • Usei sua soluçao como base, mas como previa quando foi preciso fazer os gradients, deu problema com o text gradient no IE 10 Commented 6/09/2017 às 13:50
0

Bem antes de tudo, meter gradiente em bordas é um bocado difícil,

EDITADO:

fiz este pequeno exemplo de um botão o resultado é quase identico:

a {
  text-decoration: none;
  font-family:sans-serif;
  
}
input{
  background:none;
  border: none;
}
.outer {
    padding: 2px;
    text-align: center;
    border-radius: 8px;
    background: linear-gradient(to right, #04a6f3, #0072ff);
    width: 150px;
}

.inner {
     display: block;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    background-color: #fff;
    color: #0095ff;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
<div class="outer">
     <a href="#" class="inner">CONHEÇA</a>
</div>

5
  • Ficou muito bom, mas preciso que seja um <a> e não um input :/ Commented 24/08/2017 às 13:48
  • @João editei a resposta para <a> acho que ficou bom :)!
    – 13dev
    Commented 24/08/2017 às 13:57
  • A cor do text não está gradiente né?! No restante ficou muito bom! Commented 24/08/2017 às 14:07
  • Não, mas no texto já é mais fácil, se quiseres edito a resposta
    – 13dev
    Commented 24/08/2017 às 14:11
  • 1
    Consegui aqui já! Valeu pela ajuda :D Commented 24/08/2017 às 14:13
-2

.MeuBotao {
  padding: 10px;
  border-radius: 4px;
  font-weight: 600;
  background-image: linear-gradient(to bottom, white, purple);
}
.MeuBotao h3 {
  font-size: 40px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<button class="MeuBotao" type="button"><h3>Conheça</h3></button>

Fontes de estudo:

Pronto amigão! Ai está! Agora é só por seu estilo! Espero ter ajudado

2
  • Você usou os gradientes mas o resultado final ficou totalmente diferente do proposto Commented 24/08/2017 às 12:59
  • @DiegoMarques eu só utilizei um exemplo! Commented 24/08/2017 às 13:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .