Eis o que está acontecendo: Estou a desenvolver uma página HTML, consegui finalizar o desenvolvimento da página, porém, o arquivo HTML da página é carregado externamente em outra parte do site. O que está acontecendo é que o estilo css de link padrão do site está conflitando com o estilo CSS da página html, como podem verificar nas imagens a seguir:
Screenshot da pagina do arquivo html:
Screenshot da página onde o arquivo é carregado:
Eu já tentei usar !important
no css do meu arquivo html, mas não funcionou.
Meu código é o seguinte:
HTML
<a href="http://compre.vc/" rel="nofollow" target="_blank">
<input type="button" value="Clique aqui para comprar" class="splashywaves-effect splashywaves-light splashybtn" />
</a>
CSS
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;
}
Link direto do arquivo HTML:
http://lucrebem.com.br/va/artigos-complexos/splashcss/
Link da página para teste (Espere o pop up lightbox carregar):
http://lucrebem.com.br
EDITADO:
Screenshot do popup