CSS - Conflict between link classes

0

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!importantinthecssofmyhtmlfile,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

    
asked by anonymous 25.05.2017 / 21:23

1 answer

0

Resolved, it was a problem causing the no external links extension of Joomla. All you had to do was add the <!-- extlinks --> <!-- /extlinks --> around the href and the buttons appeared. I thank the help of all you.

    
26.05.2017 / 07:57