Here's what's happening: I'm developing an HTML page, I've managed to finish the development of the page, but the page's HTML file is loaded externally elsewhere in the site. What is happening is that the default site link css style is conflicting with the CSS style of the html page, as you can see in the following images:
Screenshot of the page of the html file:
Screenshotofthepagewherethefileisloaded:
Ialreadytriedtouse!important
inthecssofmyhtmlfile,butitdidnotwork.
Mycodeisasfollows:
HTML
<ahref="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;
}
HTML file direct link:
http://lucrebem.com.br/va/artigos-complexos/splashcss/
Test page link (Wait for pop up lightbox to load):
http://lucrebem.com.br
EDITED:
Popup Screenshot