link hover styles are taking not effect

Question

I've done quite a bit of searching on here and on google, but I'm having difficulty in finding what the problem is with my hover style on my link.

I'm changing out what used to be a form box into what is not just going to be a link to a landing page. I have changed my text to a link (see html below) and essentially what's happening is the link is a permanent purple color (see picture).

HTML

<section class="get-started">
  <div class="shadow"></div>
  <div class="background"></div>
  <div class="inner">
    <h3><a href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>
    <?php// echo do_shortcode('[form]'); ?>
    <script type="text/javascript">
    //  jQuery(window).ready(function($){
      //  var form = $('form');
        //$('.submit-button').click(function(){
          //form.submit();
      // });
    // });
    </script>
  </div>
</section>

CSS

section.get-started {
  position: relative;
}

.get-started a.view_more {
    display: inline-block;
    color: #dfdfdf;
    transition: color .15s ease;
    font-size: 22px;
    text-align: center;
    text-decoration: none;
  }
  @media(min-width: 1435px){
    .get-started a.view_more {
      display: inline-block;
      padding: 0 0 0 15px;
      vertical-align: middle;
    }
  }
  @media(max-width: 1435px){
    .get-started a.view_more {
      display: block;
      padding: 15px 0;
    }
  }
  .get-started a.view_more:hover {
    color: #FFB547;
  }
  .get-started .view_more span {
    display: block;
    font-size: 50px;
    margin: 0 0 10px 0;
  }

  .get-started div.shadow {
    width: 100%;
    height: 50%;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
  }
  .get-started div.background {
    width: 100%;
    height: 50%;
    background-color: #f7f7f7;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .get-started div.inner {
    background-color: #FFB547;
    overflow: visible;
    position: relative;
    z-index: 2;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
  }
    @media(min-width: 900px){
      .get-started div.inner {
        padding: 120px 50px;
        height: 220px;
      }
    }
    @media(max-width: 900px){
      .get-started div.inner {
        padding: 10% 5%;
      }
    }
    .get-started div.inner:before {
      content: '';
      position: absolute;
      right: 100%;
      top: 0px;
      width: 0px;
      height: 0px;
      border-top: 460px solid transparent;
      border-bottom: 0 solid transparent;
      border-right: 200px solid #e5a340;
      z-index: -1;
    }

    .get-started h3 {
      font-weight: 300;
      margin: 0 0 15px 0;
      text-align: center;
      color: white;
    }
      @media(min-width: 500px){
        .get-started h3 {
          font-size: 50px;
        }
      }
      @media(max-width: 500px){
        .get-started h3 {
          font-size: 36px;
        }
      }
    .get-started h4 {
      text-align: center;
      font-weight: 300;
      color: white;
      font-size: 24px;
      margin: 0 0 60px 0;
    }
    .get-started form {
      text-align: center;
    }
      .get-started form input[type="text"],
      .get-started form input[type="email"] {
        background-color: transparent;
        outline: none;
        border: none;
        border-bottom: 2px solid rgba(255,255,255,.6);
        font-size: 24px;
        padding: 0 0 2px 5px;
        color: white;
        vertical-align: middle;
        font-weight: 300;
        border-radius: 0;
      }
        @media(min-width: 1000px){
          .get-started form input[type="text"],
          .get-started form input[type="email"] {
            width: 200px;
            display: inline-block;
            margin: 0 20px 0 0;
          }
            .get-started form input[type="email"] {
              width: 350px;
            }
        }
        @media(max-width: 1000px){
          .get-started form input[type="text"],
          .get-started form input[type="email"] {
            width: 100%;
            max-width: 400px;
            display: block;
            margin: 0 auto 20px auto;
          }
        }
        .get-started form input[type="text"]::placeholder,
        .get-started form input[type="email"]::placeholder {
          color: rgba(255,255,255,.6);
        }
        .get-started form input[type="text"]:-ms-input-placeholder,
        .get-started form input[type="email"]:-ms-input-placeholer {
          color: rgba(255,255,255,.6);
        }
      .get-started form input[type="submit"] {
        display: none;
      }
      .get-started form span.fa {
        color: white;
        font-size: 50px;
        position: relative;
        top: 10px;
        right: 5px;
        cursor: pointer;
        opacity: .6;
        transition: opacity .15s ease;
      }
        .get-started form span.fa:hover {
          opacity: 1;
        }

I tried to change the class of the link to view_more it changes to the below image

<div class="inner">
    <h3><a class="view_more" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>....

But this still isn't the exact style I want, so I think that just changing the classes will work, right?

So I change the class to view_more_optin and add the following CSS:

<div class="inner">
    <h3><a class="view_more_optin" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>....



.get-started a.view_more_optin {
  display: inline-block;
  color: #dfdfdf;
  transition: color .15s ease;
  font-size: 22px;
  text-align: center;
  text-decoration: none;
}
@media(min-width: 1435px){
  .get-started a.view_more_optin {
    display: inline-block;
    padding: 0 0 0 15px;
    vertical-align: middle;
  }
}
@media(max-width: 1435px){
  .get-started a.view_more_optin {
    display: block;
    padding: 15px 0;
  }
}
.get-started a.view_more_optin:hover {
  color: #FFB547;
}
.get-started .view_more_optin span {
  display: block;
  font-size: 50px;
  margin: 0 0 10px 0;
}

But alas, I get a result of the original picture!

What is overruling my new classes that I am making?

Answer 1

It looks like you're in fact asking quite a basic question. You may have a lot of code there from the theme, and perhaps got a bit lost in it.

The best way to control the style of the link is to add a class to it, and then style that class. Below you can see an example of adding the .contact-link class to the anchor element, and then styling it. I hope it helps!

 /* this line is only for this example, ignore it */ body { background-color: seagreen; } /* add these lines below to the end of your stylehseet */ a.contact-link, a.contact-link:visited { color: white; } a.contact-link:hover { color: blue; } 

 <section class="get-started"> <div class="shadow"></div> <div class="background"></div> <div class="inner"> <h3><a class="contact-link" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3> </div> </section>