السلام عليكم ورحمة الله وبركاته
نقدم لكم اليوم في هذه التدوينة ازرار المعاينة والتحميل v3 بشكل احترافي والتي يحتاجها كل مدون
وكالعادة نقدمها لكم بتصميم حديث وانيق
طريقة التركيب:
توجه الى القالب ثم تحرير html
ضع كود التالي فوق ]]></b:skin>
.Button__textWrapper, .Button__text, .Button__icon { position: absolute; width: 100%; height: 100%; left: 0; } .Button__text, .Button__icon { -webkit-transition: top 500ms; transition: top 500ms; } .Button { margin: 10px; display: inline-block; position: relative; background-color: #2b3743; color: #fff; font-size: 1.2rem; border-radius: 2px; width: 200px; height: 60px; text-align: center; -webkit-transition: background-color 500ms, -webkit-transform 100ms; transition: background-color 500ms, -webkit-transform 100ms; transition: background-color 500ms, transform 100ms; transition: background-color 500ms, transform 100ms, -webkit-transform 100ms; } .Button__textWrapper { overflow: hidden; } .Button__text { line-height: 60px; top: 0; } .Button__icon { top: 100%; background: url("https://cl.ly/0X3o100h2H0g/icon-download.svg") no-repeat center center; } .Button::before { content: attr(data-tooltip); width: 140px; height: 60px; background-color: #2b3743; font-size: 1rem; border-radius: .25em; line-height: 60px; bottom: 90px; left: calc(50% - 70px); direction: rtl; } .Button::after { content: ''; width: 0; height: 0; border: 10px solid transparent; border-top-color: #2b3743; left: calc(50% - 10px); bottom: 70px; } .Button::before, .Button::after { position: absolute; opacity: 0; -webkit-transition: all 500ms; transition: all 500ms; visibility: hidden; } .Button:hover { background-color: #01BAEF; } .Button:hover .Button__text { top: -100%; } .Button:hover .Button__icon { top: 0; } .Button:hover::before, .Button:hover::after { opacity: 1; visibility: visible; } .Button:hover::after { bottom: 60px; } .Button:hover::before { bottom: 80px; } .Button:active { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } #demo .Button__textWrapper .Button__icon { background: url(https://1.bp.blogspot.com/-P8wm6U-KIqI/WmXTiBX4aBI/AAAAAAAAC3c/fwmE0giKR5ws-2WugOQXgNnJBoBAhoP6gCLcBGAs/s1600/1608688-256.png) no-repeat center center; background-size: 22%; } #dload:hover { background: #d81010; }
ضع الكود التالي داخل المواضيع مع تحرير HTML
كود المعاينة
<a class="Button" id="demo" href="#0" data-tooltip="codepen"><span class="Button__textWrapper"><span class="Button__text">معاينة</span><span class="Button__icon" aria-hidden="true"></span></span></a>
كود التحميل
<a class="Button" id="dload" href="#0" data-tooltip="حجم الملف : 2MB"><span class="Button__textWrapper"><span class="Button__text">تحميل</span><span class="Button__icon" aria-hidden="true"></span></span></a>
اتمنئ ان يكون الموضوع اعجبكم لا تنسى الاشتراك في الموقع ليصلك كل جديد
والي اللقاء في موضوع اخر انشاء الله
add_comment ليست هناك تعليقات:
إرسال تعليق