I need to create a button with this code and I can not! [closed]

Navigation
-3

I need to make a button that has this code: 

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

Only "Want to Register" appears, it works fine, but I need a button to look better.

If it could be in html, so I put it together even better

If it does not, it's a css that is only for this button, because on the same page there are other buttons that are ok, I need customization only for this one!

Does anyone know how to do this? if it is possible?

    
asked by anonymous 31.01.2017 / 18:57

3 answers

1

Considering that I do not know which code is in the manual-optin-trigger class, adding just that in the style that already looks a bit handsome: 

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>

You can also add the meuBotao class to the a tag and paste the code into the CSS file. 

.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>
    
31.01.2017 / 19:06
0

You can create a style for this button only using id or class or put the style in the style tag.

With class: 

.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>

With 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>

With id and class you do not need the style tag, remembering that this is not a good practice. Ideally you should separate CSS from HTML.

With direct tag style: 

    <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>
    
01.02.2017 / 18:00
-1

Would that be ideal for you? 

.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>
    
01.02.2017 / 05:31
Get pre-defined value and assign in another field [duplicate] What is the difference between executing SQL and SGBD in an intermediate language (PHP, Java, C #)? [closed]