I can’t apply CSS to input button

Asked

Viewed 569 times

-3

My code is this:

<a href="http://compre.vc/"  rel="nofollow" target="_blank">
   <input type="button" value="Clique aqui para comprar" class="splashywaves-effect splashywaves-light splashybtn"  />
</a>

If I try without the input, only with the ahref, It works, but when I try it that way, it won’t. If I try using <button>, also works, however, I need the link to be nofollow, since it is external link.

Ps: The CSS code 

button.splashybtn:hover, button.splashybtn-large:hover {
     background-color:#000000;
}



.splashyz-depth-1-half, button.splashybtn:hover, button.splashybtn-large:hover, button.splashybtn-floating:hover {
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
}
a:active.splashy, a:hover.splashy {
    outline: 0;
}
.splashywaves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    transition: .3s ease-out;
}
button.splashybtn, button.splashybtn-large {
    text-decoration: none;
    color: #fff;
    background-color: #E8562A;
    text-align: center;
    letter-spacing: .5px;
    transition: .2s ease-out;
    cursor: pointer;
}
button.splashybtn, button.splashybtn-large, button.splashybtn-floating, button.splashybtn-large, button.splashybtn-flat {
    font-size: 1rem;
    outline: 0;
}
button.splashybtn, button.splashybtn-large, button.splashybtn-flat {
   border: none;
    border-radius: 2px;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 0.5rem;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
.splashyz-depth-1, .splashycard-panel, .splashycard, .splashytoast, button.splashybtn, button.splashybtn-large, button.splashybtn-floating, .splashydropdown-content, .splashycollapsible, .splashyside-nav {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}











button.splashybtn1 {    text-decoration: none;
    color: #fff;
    background-color: #26a69a;
    text-align: center;
    letter-spacing: .5px;
    transition: .2s ease-out;
    cursor: pointer;
}
button.splashybtn1 {    font-size: 1rem;
    outline: 0;
}
button.splashybtn1 {    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 2rem;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
button.splashybtn-flat1 {    font-size: 1rem;
    outline: 0;
}
button.splashybtn-flat1 {    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 2rem;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
button.splashybtn-floating1 {    font-size: 1rem;
    outline: 0;
}
button.splashybtn-large1 {    text-decoration: none;
    color: #fff;
    background-color: #26a69a;
    text-align: center;
    letter-spacing: .5px;
    transition: .2s ease-out;
    cursor: pointer;
}
button.splashybtn-large1 {    font-size: 1rem;
    outline: 0;
}
button.splashybtn-large1 {    font-size: 1rem;
    outline: 0;
}
button.splashybtn-large1 {    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 2rem;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
.splashywaves-effect1 {    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    transition: .3s ease-out;
}

Here’s what’s going on. This url is the direct link to the html file: lucrebem.com.br/va/artigos-complexos/splashcss But the same file is loaded and displayed in a pop up that appears on the site, here: lucrebem.com.br The popup appears a few seconds after the page is loaded. As you can see, in the popup the buttons do not appear.

Screenshot of page html file: inserir a descrição da imagem aqui

Screenshot of the loaded page: inserir a descrição da imagem aqui

html css css3
  • 1

    [Edit] your question and add the css you tried to do. And it explains the goal better, I didn’t understand why to use the input and use the rel="nofollow"

  • 6

    It just doesn’t make sense to use a input within an element a. Anything you do like this, you will be sneaking away from any standard, specification or recommendation. Don’t do this. If you need the appearance of a button, style the element itself with CSS a the way you want it. You can read about it here.

  • In that case I can’t do the style href, need to be on a button. If I use button, cannot use the attribute nofollow?

  • 1

    Just a hint: It’s a tremendous gambit, and a mess that only use name of significant classes.

1 answer

1

As you need it to be nofollow, you can use HTML meta tag on pages that should not be indexed in search engines:

<meta name="robots" content="noindex, nofollow">

More details on this you can read:

About the rel="nofollow", you can only use it in tag a.

You can follow the tip on commenting anderson’s:

It simply makes no sense to use an input inside an element a. Anything you do like this, will be gambiarra, running away from any standard, specification or recommendation. Do not do this. If you needs the appearance of a button, style with CSS the element itself the way you wish.

To do this, you can create a class for buttons. For example, in your CSS code, instead of button you put a and adds these classes to the component:

 <a href="http://compre.vc/" class="splashywaves-effect splashywaves-light splashybtn" rel="nofollow" target="_blank">
      Clique aqui para comprar
 </a>

Remembering that it’s not just changing button for a, this is an example. In your code you will have to make the modifications in order not to interfere with other parts. See:

a.splashybtn:hover,
a.splashybtn-large:hover {
  background-color: #000000;
}

.splashyz-depth-1-half,
a.splashybtn:hover,
a.splashybtn-large:hover,
a.splashybtn-floating:hover {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

a:active.splashy,
a:hover.splashy {
  outline: 0;
}

.splashywaves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  transition: .3s ease-out;
}

a.splashybtn,
a.splashybtn-large {
  text-decoration: none;
  color: #fff;
  background-color: #E8562A;
  text-align: center;
  letter-spacing: .5px;
  transition: .2s ease-out;
  cursor: pointer;
}

a.splashybtn,
a.splashybtn-large,
a.splashybtn-floating,
a.splashybtn-large,
a.splashybtn-flat {
  font-size: 1rem;
  outline: 0;
}

a.splashybtn,
a.splashybtn-large,
a.splashybtn-flat {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 28px;
  line-height: 28px;
  padding: 0 0.5rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.splashyz-depth-1,
.splashycard-panel,
.splashycard,
.splashytoast,
a.splashybtn,
a.splashybtn-large,
a.splashybtn-floating,
.splashydropdown-content,
.splashycollapsible,
.splashyside-nav {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

a.splashybtn1 {
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  transition: .2s ease-out;
  cursor: pointer;
}

a.splashybtn1 {
  font-size: 1rem;
  outline: 0;
}

a.splashybtn1 {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

a.splashybtn-flat1 {
  font-size: 1rem;
  outline: 0;
}

a.splashybtn-flat1 {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

a.splashybtn-floating1 {
  font-size: 1rem;
  outline: 0;
}

a.splashybtn-large1 {
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  transition: .2s ease-out;
  cursor: pointer;
}

a.splashybtn-large1 {
  font-size: 1rem;
  outline: 0;
}

a.splashybtn-large1 {
  font-size: 1rem;
  outline: 0;
}

a.splashybtn-large1 {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.splashywaves-effect1 {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  transition: .3s ease-out;
}
<a href="http://compre.vc/" class="splashywaves-effect splashywaves-light splashybtn" rel="nofollow" target="_blank"> 
  Clique aqui para comprar
</a>

  • I told you twice I can’t use the <a href> alone. There is conflict with other CSS classes, so I asked for a button or input.

  • @Mathewriver has already created a class just for the button? Type .button {background-color: #EEEEEE; color: #333333; }

  • splashybtn is the class of the button.

  • @Mathewriver, I edited the answer with more information. You can’t put rel="nofollow" in the button. When you said that "there’s conflict with other CSS classes," it’s because you can’t just change everything, probably the tag a is used in various parts of your code. My answer is an example so that you can adapt your code.

  • Look what’s going on. This url is the direct link to the html file: http://lucrebem.com.br/va/artigos-complexos/splashcss But the same file is loaded and displayed in a pop up that appears on the site, here: http://lucrebem.com.br/ The popup appears a few seconds after the page is loaded. As you can see, in the popup the buttons do not appear.

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.