title: change backend html wordpress
body: <p>I have a WordPress site with a custom theme: 
  <a href="http://prezorgnl.server157.nognietactief.nl/" rel="nofollow">http://prezorgnl.server157.nognietactief.nl/</a></p>
  
  <p>And there is a clickable button I want to copy and replace with another clickable button. In the section "Zorg Diensten" there is a clickable button called "Klik Hier" which I want to copy and replace it with the basketball icon in the section "Wat bieden wij?" </p>
  
  <p>How do I change this with CSS/HTML</p>
  
  <p>CSS code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*::before, *::after {
      box-sizing: border-box;
  }
  .angle-effect.custom-btn::after {
      left: 50%;
      transform: skew(50deg) scale(1.1, 1);
      width: 0;
  }
  .custom-btn::after, .angle-effect.custom-btn::after, .btn {
      transition: all 0.25s ease 0s;
  }
  .blog #main-menu.navbar-default, .archive #main-menu.navbar-default, .single #main-menu.navbar-default, .page-template-default #main-menu.navbar-default, .publish-date, .custom-btn::after, .hex, .hex::before, .hex::after, .content-icon-hex, .hex.scroll-top::after, .hex.scroll-top::before, .hex.scroll-top, .section-title::after, .carousel-indicators li.active, .pricing-item:hover .item-head, .pricing-item .item-name::after, .slide-nav:hover, .gallery-item figure:hover .item-description, .news-article .meta-icon, .parallax-title::after, .causes-post .custom-progress-bar, .single-causes-post .custom-progress-bar, .donate-btn:hover, .team-member-box:hover .member-designation::after, .owl-page.active, .team-member-box::before, .service-box:hover .service-icon-hex, .service-box:hover .service-icon-hex::before, .service-box:hover .service-icon-hex::after, .event-timeline, .blog-sidebar .btn:hover, .link-hex:hover {
      background-color: #003996;
  }
  .custom-btn::after {
      background: none repeat scroll 0 0 #f39c12;
      content: "";
      height: 100%;
      left: -100%;
      opacity: 1;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: -1;
  }
  .custom-btn::after, .angle-effect.custom-btn::after, .btn {
      transition: all 0.25s ease 0s;
  }
  *::before, *::after {
      box-sizing: border-box;
  }
  .hex, .hex::before, .hex::after, .carousel-indicators li.active, .white-bg .custom-btn, .gray-bg .custom-btn, .custom-btn:hover, .post-box .custom-btn, .galleryFilter .current, .time-circle .time-number, .contact-form-container .custom-btn, .contact-info .contact-address li::before, .comment-form .form-control:focus, .contact-form-container .form-control:focus, .contact-form-container .custom-btn:hover, .owl-page.active, .single-event-post .time-circle .time-number, .link-hex {
      border-color: #003996;
  }
  .white-bg .custom-btn, .gray-bg .custom-btn {
      border-color: #f39c12;
      color: #0d0d0d;
  }
  .custom-btn {
      border: 2px solid #ffffff;
      color: #ffffff;
      font-size: 1em;
      margin: 5px 10px;
      padding: 0 20px;
      text-transform: uppercase;
  }
  .custom-btn {
      font-weight: 700;
      height: 40px;
      line-height: 38px;
      overflow: hidden;
      z-index: 0;
  }
  .custom-btn::after, .angle-effect.custom-btn::after, .btn {
      transition: all 0.25s ease 0s;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is the CSS I want to replace it with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fa-dribbble::before {
      content: "";
  }
  *::before, *::after {
      box-sizing: border-box;
  }
  *::before, *::after {
      box-sizing: border-box;
  }
  .fa {
      display: inline-block;
      font-family: FontAwesome;
      font-feature-settings: normal;
      font-kerning: auto;
      font-language-override: normal;
      font-size: inherit;
      font-size-adjust: none;
      font-stretch: normal;
      font-style: normal;
      font-synthesis: weight style;
      font-variant: normal;
      font-weight: normal;
      line-height: 1;
      text-rendering: auto;
  }
  * {
      box-sizing: border-box;
  }
  .social-buttons a {
      color: #b3b3b3;
  }
  .social-buttons a {
      color: #0d0d0d;
      font-size: 1.125em;
      line-height: 22px;
  }
  a {
      color: #0d0d0d;
  }
  a, h1, h2, h3, h4, h5, h6, p {
      font-family: "Raleway",sans-serif;
  }
  a {
      color: #428bca;
  }
  .team-member-box {
      color: #737373;
      text-align: center;
  }
  html, body {
      color: #737373;
      font-family: "Raleway",sans-serif;
      font-size: 16px;
  }
  body {
      color: #333;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 16px;
      line-height: 1.42857;
  }
  html, body {
      color: #737373;
      font-family: "Raleway",sans-serif;
      font-size: 16px;
  }
  html {
      font-size: 62.5%;
  }
  html {
      font-family: sans-serif;
  }</code></pre>
  </div>
  </div>
  </p>