ازرار المعاينة والتحميل بتقنية css3 وبشكل جديد حصريا

السلام عليكم ورحمة

الله وبركاته

--

في هذه التدوينة اقدم لكم ازرار التحميل والمعاينة بتقنية css3 وبشكل جديد للبلوجر

• معاينة

-----------------------------------------------

• 
  

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

1. توجه الى القالب ثم تحرير html
2. ابحث عن الوسم ]]></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 7c */ .btn-7c { overflow: hidden; } .btn-7c:before { color: #fff; z-index: 1; } .btn-7c:after { position: absolute; top: 0; left: 0; height: 100%; z-index: 0; width: 0; background: #0a833d; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7c.btn-activated:after { -webkit-animation: fillToRight 0.7s forwards; -moz-animation: fillToRight 0.7s forwards; animation: fillToRight 0.7s forwards; } @-webkit-keyframes fillToRight { to { width: 100%; } } @-moz-keyframes fillToRight { to { width: 100%; } } @keyframes fillToRight { to { width: 100%; } } /* Button 7d */ .btn-7d { overflow: hidden; } .btn-7d:before { color: #fff; z-index: 1; } .btn-7d:after { position: absolute; top: 0; left: 0; height: 0; width: 100%; z-index: 0; background: #21bb63; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7d.btn-activated:after { -webkit-animation: emptyBottom 0.7s forwards; -moz-animation: emptyBottom 0.7s forwards; animation: emptyBottom 0.7s forwards; } @-webkit-keyframes emptyBottom { to { height: 100%; } } @-moz-keyframes emptyBottom { to { height: 100%; } } @keyframes emptyBottom { to { height: 100%; } } /* 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; }

1. ابحث عن </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>

زر التحميل والمعاينة بالايقونات

1. ضع الكود التالي في المكان الذي يناسبك

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

زر التحميل والمعاينة بدون ايقونات

1. ضع الكود التالي في المكان الذي يناسبك

<section id="btn-click"> <p> <a href="#"><button class="btn btn-7 btn-7c">معاينة القالب</button></a> <a href="#"><button class="btn btn-7 btn-7d">تحميل القالب</button></a> </p> </section>

maestro mohamed