CSS - Link class conflict

Question

Here’s what’s happening: I’m developing an HTML page, I was able to finish developing the page, but the HTML file of the page is uploaded externally elsewhere on the site. What’s happening is that the site’s default link css style is conflicting with the CSS style of the html page, as you can see in the following images:

Screenshot of the html file page:

Screenshot of the page where the file is loaded:

I’ve tried to use !important in the css of my html file, but it didn’t work.

My code is this:

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;
}

Direct link to HTML file:

http://lucrebem.com.br/va/artigos-complexos/splashcss/

Page link for testing (Wait for lightbox pop up to load):

http://lucrebem.com.br

EDITED:

Screenshot of the popup

Answer 1

Solved, it was a problem causing by the extension in Xternal Links, Joomla. Just add the <!-- extlinks --> <!-- /extlinks --> around the href and the buttons appeared. I appreciate the help of all.