ازرار المعاينة والتحميل 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">معاينة</a>

كود التحميل

<a class="Button" id="dload" href="#0" data-tooltip="حجم الملف : 2MB">تحميل</a>

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

والي اللقاء في موضوع اخر انشاء الله

موقع الوليد نت

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

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

Default