Meu código é o seguinte:
<a href="http://compre.vc/" rel="nofollow" target="_blank">
<input type="button" value="Clique aqui para comprar" class="splashywaves-effect splashywaves-light splashybtn" />
</a>
Se eu tentar sem o input
, apenas com o ahref
, funciona, mas quando eu tento desse jeito aí, não vai.
Se eu tentar usando <button>
, também funciona, porém, eu preciso que o link seja nofollow, já que é link externo.
Ps: O código CSS
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;
}
Eis o que está acontecendo. Esta url é o link direto do arquivo html: lucrebem.com.br/va/artigos-complexos/splashcss
Mas o mesmo arquivo é carregado e exibido em um pop up que aparece no site, aqui: lucrebem.com.br
O popup aparece alguns segundos depois da página ser carregada. Como pode observar, no popup os botões não aparecem.
input
e usar orel="nofollow"
input
dentro de um elementoa
. Qualquer coisa que você faça assim, será gambiarra, fugindo de qualquer padrão, especificação ou recomendação. Não faça isso. Se você precisa da aparência de um botão, estilize com CSS o próprio elementoa
da forma que fique como desejar. Pode ler sobre isso aqui.href
, precisa ser num botão. Se eu utilizarbutton
, não tem como usar o atributonofollow
?