I can not apply CSS to input button

Question

I can not apply CSS to input button

Navigation

#1 by (2 votes)

-2

My code is as follows:

<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 input , only with ahref , it works, but when I try that way there, it will not. If I try using <button> , it also works, however, I need the link to be nofollow, since it is an 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 happening. This url is the direct link of the html file: lucrebem.com.br/va/artigos-complexos/splashcss But the same file is loaded and displayed in a popup that appears on the site, here: lucrebem.com.br The popup appears a few seconds after the page loads. As you can see, in the popup the buttons do not appear.

Screenshot of the page html file:

Screenshotofpageloaded:

html css css3

asked by anonymous 24.05.2017 / 00:13

1 answer

Read data from a column through C # [closed] Ajax does not work in Internet Explorer 6

score 2 · Answer 1

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

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

More details on this you can read:

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

You can follow the hint at comment from Anderson:

It simply does not make sense to use an input inside an element The. Anything you do that way, will be gambiarra, running away from any standard, specification or recommendation. Do not do it. If you needs the appearance of a button, stylize with CSS the element itself the way you want it to be.

For you to do this, you can create a class for buttons. For example, in your CSS code, instead of button you put a and add those 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 is not just switching from button to a , this is an example. In your code you will have to make the modifications so as not to interfere with the 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>