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

بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عدنا لكم بازرار بشكل فلات والوان متناسقة ايضا يمكنك تغييرها وهو كود " CSS " بسيط مع تأثير " hover " لا يلزم الكثير من الخبرات ايضا 

الازرار ذو شكل خيالي و احترافي لابد و انك ستحتاج ازرار تحميل و معاينة 

هذه الازرار تم اختيارها و قمت بالتعديل عليها لتظهر بهذا الشكل الجميل و الفريد و المميز بها 

ان هذه الازرار عند المرور عليها تظهر تلميحات رائعة جدا و طبعا يمكنك تغير التلميحات و لونها و الكتابة الموجودة عليها

من خلال الكود 

و طريقة تركبها سهلة و لا تحتاج لجهد و فقط بعدة خطوات 

لمعرفة الطريقة تابع الشرح التالي

طريقة تركيب الكود

.Button__textWrapper,.Button__text,.Button__icon{position:absolute;width:100%;height:100%;left:0;color:#fff}.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://i.imgur.com/qDThoot.png")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;color:#fff}.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:background-size:22%}#dload:hover{background:#d81010}