ازرار ويب متحركة بتصميم فلاتي Css3

اضافتنا اليوم مهمة جدا للمواقع وهي ازرار ويب بتصميم فلاتي بتقنية  Css3 وjs بتأثير هوفر بمظهر احترافي جدا للتميز بمواضيع موقعك

معاينة

 

طريقة التركيب

 

تقوم ببحث عن 

 </body>

وضع الكود التالي اعلاه / فوقه

<script src="https://googledrive.com/host//0B30379AIS0OdODB0dEJSLXNGbWc/"></script>
<script type='text/javascript'>
//<![CDATA[
   var buttons7Click = Array.prototype.slice.call( document.querySelectorAll( '#btn-click button' ) ),
    buttons9Click = Array.prototype.slice.call( document.querySelectorAll( 'button.btn-8g' ) ),
    totalButtons7Click = buttons7Click.length,
    totalButtons9Click = buttons9Click.length;
   buttons7Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
   buttons9Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
   function activate() {
    var self = this, activatedClass = 'btn-activated';
    if( classie.has( this, 'btn-7h' ) ) {
     // if it is the first of the two btn-7h then activatedClass = 'btn-error';
     // if it is the second then activatedClass = 'btn-success'
     activatedClass = buttons7Click.indexOf( this ) === totalButtons7Click-2 ? 'btn-error' : 'btn-success';
    }
    else if( classie.has( this, 'btn-8g' ) ) {
     // if it is the first of the two btn-8g then activatedClass = 'btn-success3d';
     // if it is the second then activatedClass = 'btn-error3d'
     activatedClass = buttons9Click.indexOf( this ) === totalButtons9Click-2 ? 'btn-success3d' : 'btn-error3d';
    }
    if( !classie.has( this, activatedClass ) ) {
     classie.add( this, activatedClass );
     setTimeout( function() { classie.remove( self, activatedClass ) }, 1000 );
    }
   }
   document.querySelector( '.btn-7i' ).addEventListener( 'click', function() {
    classie.add( document.querySelector( '#trash-effect' ), 'trash-effect-active' );
   }, false );
//]]>
</script>

ثم وضع اكواد css تقوم ببحث عن الكود

 ]]></b:skin>

وتضع الكود التالي اعلاه / فوقه

.btn {
 border: none;
 font-family: inherit;
 font-size: inherit;
 color: inherit;
 background: none;
 cursor: pointer;
 padding: 25px 80px;
 display: inline-block;
 margin: 15px 30px;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 700;
 outline: none;
 position: relative;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
 z-index: 99999;
}
.btn:after {
 content: '';
 position: absolute;
 z-index: -1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}
/* icon */
.icon-truck:before {
 content:  "\f019";
 font-family: FontAwesome;
}
.icon-envelope:before {
 content:  "\f002";
 font-family: FontAwesome;
}
/* Button 7 */
.btn-7 {
 background: #17aa56;
 color: #fff;
 border-radius: 7px;
 box-shadow: 0 5px #119e4d;
 padding: 25px 60px 25px 90px;
}
/* Button 7a */
.btn-7a {
 overflow: hidden;
}
.btn-7a:before {
 position: absolute;
 left: 0;
 width: 40%;
 font-size: 160%;
 line-height: 0.8;
 color: #0a833d;
}
.btn-7a.btn-activated {
 -webkit-animation: fadeOutText 0.5s;
 -moz-animation: fadeOutText 0.5s;
 animation: fadeOutText 0.5s;
}
.btn-7a.btn-activated:before {
 -webkit-animation: moveToRight 0.5s;
 -moz-animation: moveToRight 0.5s;
 animation: moveToRight 0.5s;
}
@-webkit-keyframes fadeOutText {
 0% { color: transparent; }
 80% { color: transparent; }
 100% { color: #fff; }
}
@-moz-keyframes fadeOutText {
 0% { color: transparent; }
 80% { color: transparent; }
 100% { color: #fff; }
}
@keyframes fadeOutText {
 0% { color: transparent; }
 80% { color: transparent; }
 100% { color: #fff; }
}
@-webkit-keyframes moveToRight {
 80% { -webkit-transform: translateX(250%); }
 81% { opacity: 1; -webkit-transform: translateX(250%); }
 82% { opacity: 0; -webkit-transform: translateX(250%); }
 83% { opacity: 0; -webkit-transform: translateX(-50%); }
 84% { opacity: 1; -webkit-transform: translateX(-50%);  }
 100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes moveToRight {
 80% { -moz-transform: translateX(250%); }
 81% { opacity: 1; -moz-transform: translateX(250%); }
 82% { opacity: 0; -moz-transform: translateX(250%); }
 83% { opacity: 0; -moz-transform: translateX(-50%); }
 84% { opacity: 1; -moz-transform: translateX(-50%);  }
 100% { -moz-transform: translateX(0%); }
}
@keyframes moveToRight {
 80% { transform: translateX(250%); }
 81% { opacity: 1; transform: translateX(250%); }
 82% { opacity: 0; transform: translateX(250%); }
 83% { opacity: 0; transform: translateX(-50%); }
 84% { opacity: 1; transform: translateX(-50%);  }
 100% { transform: translateX(0%); }
}
/* Button 7b */
.btn-7b {
 overflow: hidden;
}
.btn-7b:before {
 position: absolute;
 left: 0;
 width: 40%;
 font-size: 160%;
 line-height: 0.8;
 color: #0a833d;
}
.btn-7b.btn-activated:before {
 -webkit-animation: scaleUp 0.5s;
 -moz-animation: scaleUp 0.5s;
 animation: scaleUp 0.5s;
}
@-webkit-keyframes scaleUp {
 80% {
  opacity: 0;
  -webkit-transform: scale(2);
 }
 100% {
  opacity: 0;
  -webkit-transform: scale(2);
 }
}
@-moz-keyframes scaleUp {
 80% {
  opacity: 0;
  -moz-transform: scale(2);
 }
 100% {
  opacity: 0;
  -moz-transform: scale(2);
 }
}
@keyframes scaleUp {
 80% {
  opacity: 0;
  transform: scale(2);
 }
 100% {
  opacity: 0;
  transform: scale(2);
 }
}
/* Icon only style */
.btn-icon-only {
 font-size: 0;
 padding: 25px 30px;
}
.btn-icon-only:before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 26px;
 line-height: 54px;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
}

الخطوه الاخيره اضافتها html وطبعا في المواضيع 

ازار الاولى 

<section id="btn-click">
<p>
<button class="btn btn-7 btn-7a icon-envelope">معاينة</button>
<button class="btn btn-7 btn-7a icon-truck">تحميل</button>
</p>
</section>

ازرار الثانية

<section id="btn-click">
<p>
<button class="btn btn-7 btn-7b icon-envelope">معاينة</button>
<button class="btn btn-7 btn-7b icon-truck">تحميل</button>
</p>
</section>