-3

Preciso fazer um botão que tenha esse código:

<a href="#" class="manual-optin-trigger" data-optin-slug="pulwhi4lm1-lightbox" style="color:black">Quero Me Cadastrar</a>

Só aparece o "Quer Me Cadastrar", funcionando certinho, mas preciso de um botão pra ficar mais bonito.

Se ele pudesse ser em html, para eu colocar junto desse código melhor ainda

Se não der, que fosse um css dirigido somente a este botão, porque na mesma página tem outros botões que estão ok, preciso de personalização somente para esse!

Alguém sabe como fazer isso? se é possível?

1

3 Respostas 3

1

Considerando que não sei qual é o código que está na classe manual-optin-trigger adicionando só isso no style que já fica um pouco bonito:

background-color: lightblue; padding: 10px; border-radius: 3px;

<a href="#" class="manual-optin-trigger" data-optin-slug="pulwhi4lm1-lightbox" style="background-color: lightblue; padding: 5px; border-radius: 3px; color: black; text-decoration: none;">Quero Me Cadastrar</a>

Pode também adicionar a classe meuBotao na tag a e colar o código no arquivo CSS.

.meuBotao{
  background-color: lightblue;
  padding: 5px;
  border-radius: 3px;
  color:black;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.meuBotao:hover{
  background-color: #20b2aa;
}
<a href="#" class="manual-optin-trigger meuBotao" data-optin-slug="pulwhi4lm1-lightbox" >Quero Me Cadastrar</a>

1
  • Valeuu..vou testar!! muito obrigado
    – Henrique J
    Commented 8/02/2017 às 13:19
0

Você pode criar um estilo só para esse botão usando id ou classe ou ainda colocar o estilo na tag style.

Com a classe:

.manual-optin-trigger {
  background: black;  
  padding:5px;
  border-radius:5px;
  text-align: center;
  color:#FFF;
  text-decoration:none;
}
<a href="#" class="manual-optin-trigger" data-optin-slug="pulwhi4lm1-lightbox">Quero Me Cadastrar</a>

Com id:

#botaoCadastro {
  background: black;  
  padding:5px;
  border-radius:5px;
  text-align: center;
  color:#FFF;
  text-decoration:none;
}
<a href="#" id="botaoCadastro" class="manual-optin-trigger" data-optin-slug="pulwhi4lm1-lightbox">Quero Me Cadastrar</a>

Com id e classe você não precisa da tag style, lembrando que isso não é uma boa prática. O ideal é você separar o CSS do HTML.

Com estilo direto na tag:

    <a href="#" id="botaoCadastro" class="manual-optin-trigger" data-optin-slug="pulwhi4lm1-lightbox" style="background: black; padding:5px; border-radius:5px;    text-align: center; color:#FFF; text-decoration:none;">Quero Me Cadastrar</a>

1
  • 1
    Valeuu..vou testar!! muito obrigado
    – Henrique J
    Commented 8/02/2017 às 13:19
-1

Isso seria o ideal pra vc?

.manual-optin-trigger {
      background:green;  
      padding:10px;
      border-radius:10px;
      text-decoration:none;
      color:#FFF;
}
<a href="#" class="manual-optin-trigger" data-optin-slug="pulwhi4lm1-lightbox">Quero Me Cadastrar</a>

1
  • 1
    Valeuu..vou testar!! muito obrigado
    – Henrique J
    Commented 8/02/2017 às 13:19

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