I need to create a button with this code and I’m not getting it!

Question

I need to make a button that has that code:

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

All I see is "You Want Me To Sign Up," working fine, but I need a button to make me look better.

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

If not, that was a css directed only to this button, because on the same page there are other buttons that are ok, I need customization only for this!

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

Answer 1

Whereas I don’t know what code is in the class manual-optin-trigger adding only that in the style that already looks a little pretty:

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 class meuBotao on the tag a 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>

Answer 2

You can create a style just for this button using id or class or even 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 don’t need the tag style, remembering that this is not a good practice. Ideally you separate CSS from HTML.

With style right on the 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>

Answer 3

That would 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>