القائمة الرئيسية

الصفحات

أخر المشاركات

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

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

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

reaction:

تعليقات