title: Button proprieties changed when change CSS class name
body: <p>The below code used for button in my website i tried to use it for another button with different button, i have tried to change the class name from " set_3_button3 "  to " set_35_button35 " also " set_3_button3 fav" but the problem is the whole design changed and did not appear the same as the original one </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.set_3_button3 {
   color: rgba(255,255,255,1);
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
   position: relative;
   background:#ffe826;
   overflow: hidden;
   width: auto;
   padding: 0px 25px;
   margin-right: 2.5em;
   line-height: 45px;
   float: left;
   cursor: pointer;
   text-align: center;
  }
  .set_3_button3  a {
   color: rgba(51,51,51,1);
   text-decoration: none;
   display: block;
  }
  .set_3_button3 span {
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
  }
  .set_3_button3:hover {
   background-color:#dd483f;
  }
  .set_3_button3:hover &gt; span {
   opacity: 0;
   -webkit-transform: translate(0px, 40px);
   transform: translate(0px, 40px);
  }
  .set_3_button3::after {
   content: attr(data-text);
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   opacity: 0;
   -webkit-transform: translate(30%, 0);
   transform: translate(30%, 0);
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
  }
  .set_3_button3:hover::after {
   opacity: 1;
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="set_3_button3" data-text="Add to favorite"&gt;&lt;span&gt; &lt;i class="fa fa-star fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp; Add to favorite &lt;/span&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>