دليل المبرمجين

تسجيل دخول تسجيل جديد

تأثير جميل على الزر

عمل تأثير على الزر باستخدام الـ before والـ after

تأثير جميل على الزر

html

<button>حفظ</button>

css

body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Segoe UI';
}
button {
   width: 100px;
   height: 50px;
   border: 0;
   position: relative;
   overflow: hidden;
}
button::before,
button::after  {
   content: "حفظ";
   position: absolute;
   right: 0;
   width: 100px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 22px;
   color: #fff;
   transition: all 0.5s ease;
}
button::before {
   top: -50px;
   background-color: #ac1900;
}
button::after {
   top: 0;
   background-color: #e65100;
}
button:hover::before {
   top: 0;
}
button:hover::after {
   top: 50px;
}
مصدر الاكواد