recent
أخبار ساخنة

ازرار المعاينة والتحميل v3 بشكل احترافي

Walid Al-Bana
الصفحة الرئيسية
السلام عليكم ورحمة الله وبركاته
نقدم لكم اليوم في هذه التدوينة ازرار المعاينة والتحميل 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>

اتمنئ ان يكون الموضوع اعجبكم لا تنسى الاشتراك في الموقع ليصلك كل جديد
والي اللقاء في موضوع اخر انشاء الله

google-playkhamsatmostaqltradent