تصميمات الأزرار إبداع بتفاصيل أنيقة وتفاعلية

  

اقدم في هذه المقالة 2 زر Css مصمم بشكل جميل مع تأثيرات الرسوم المتحركة والتمرير عند التمرير ، حيث يظهر ظل متدرج لتصميم أنيق. إذا جاز التعبير ، فإنه يلفت الأنظار على الفور بتأثيره الأصلي. ما نراه في البداية على الزر هو ظل في الأسفل ، ولكن عندما يحوم المؤشر ، فإنه يختفي ، وفي نفس الوقت تظهر خدعة بصرية مثيرة للاهتمام.

إنشاء زر بتصميم أنيق مع تأثيرات تفاعلية.

1. الزر الاول

   • HTML

      
         <a href="#"class="graduensa">معاينة</a>
         

   • Css

      
     
         .graduensa {
       font-size: 15px;
       position: relative;
       outline: none;
       border: none;
       -webkit-appearance: none;
       -webkit-tap-highlight-color: transparent;
       cursor: pointer;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       padding: 0.75em 1.75em;
       border-radius: 50px;
       display: inline-block;
       color: #efe8e8;
       text-shadow: 0 1px 0 #40083d;
       text-decoration: none;
       background: -webkit-gradient(linear, left top, right top, from(#6311b7), to(#d20fec));
       background: linear-gradient(to right, #6a0dc7, #e012fb);
     }
     .graduensa::after {
       content: "";
       position: absolute;
       z-index: -1;
       bottom: -10px;
       left: 5%;
       height: 110%;
       width: 90%;
       opacity: 0.8;
       border-radius: 50px;
       background: inherit;
       -webkit-filter: blur(6px);
       -moz-filter: blur(6px);
       -o-filter: blur(6px);
       -ms-filter: blur(6px);
       filter: blur(6px);
       -webkit-transition: all 0.2s;
       transition: all 0.2s;
     }
     .graduensa:hover::after {
       -webkit-filter: blur(4px);
       -moz-filter: blur(4px);
       -o-filter: blur(4px);
       -ms-filter: blur(4px);
       filter: blur(4px);
       width: 100%;
       bottom: -5px;
       left: 0;
     }
     .graduensa:hover:active::after {
       -webkit-filter: blur(10px);
       -moz-filter: blur(10px);
       -o-filter: blur(10px);
       -ms-filter: blur(10px);
       filter: blur(10px);
     }
     
     @supports (-ms-ime-align: auto) {
       .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
       display: none;
       }
     }
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       .graduensa {
       background: -webkit-gradient(linear, left top, right top, from(#7409e0), to(#db17f5));
       background: linear-gradient(to right, #780ee2, #da15f5);
       }
       .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
       display: none;
       }
     } 

   • معاينة

     معاينة

     
     

2. الزر الثاني

   • HTML

      
        <a href="https://wiisam21.blogspot.com/" class="kefekty_animatsu">wesam devloper</a>
      

   • Css

      
     .kefekty_animatsu {
       position: relative;
       display: inline-block;
       width: 342px;
       height: 90px;
       text-align: center;
       line-height: 90px;
       color: #fff;
       font-size: 23px;
       text-transform: uppercase;
       text-decoration: none;
       font-family: sans-serif;
       box-sizing: border-box;
       background: linear-gradient(
     90deg, #15a1e0, #dc2c8e, #bdac18, #118dc5);
       background-size: 375%;
       border-radius: 12px;
       z-index: 1;
     }
        
     .kefekty_animatsu:hover {
       animation: animate 8s linear infinite;
     }
        
     @keyframes animate {
       0% {
       background-position: 0%;
       }
       100% {
       background-position: 400%;
       }
     }
        
     .kefekty_animatsu:before {
       content: "";
       position: absolute;
       top: -5px;
       right: -5px;
       bottom: -5px;
       left: -5px;
       z-index: -1;
       background: linear-gradient(
     90deg, #179fdc, #d02785, #e2d02c, #1ba7e6);
       background-size: 400%;
       border-radius: 10px;
       opacity: 0;
       transition: .5s;
     }
        
     .kefekty_animatsu:hover:before {
       filter: blur(20px);
       opacity: 1;
       animation: animate 8s linear infinite;
     } 

   • معاينة

     معاينة

شرح الاكواد

1. شرح الزر الاول كلاس(graduensa)

   • HTML

      
             <a href="#" class="graduensa">معاينة</a>
                

     • href="#": رابط مؤقت.

     • class="graduensa": تطبيق التصميم المحدد في Css.

   • Css

      
             .graduensa {
       font-size: 15px;
       position: relative;
       outline: none;
       border: none;
       -webkit-appearance: none;
       -webkit-tap-highlight-color: transparent;
       cursor: pointer;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       padding: 0.75em 1.75em;
       border-radius: 50px;
       display: inline-block;
       color: #efe8e8;
       text-shadow: 0 1px 0 #40083d;
       text-decoration: none;
       background: linear-gradient(to right, #6a0dc7, #e012fb);
     }

     تصميم مشابه لزر سابق، مع خلفية متدرجة وحواف دائرية.

     تأثير الظل ::after:

                
             .graduensa::after {
       content: "";
       position: absolute;
       z-index: -1;
       bottom: -10px;
       left: 5%;
       height: 110%;
       width: 90%;
       opacity: 0.8;
       border-radius: 50px;
       background: inherit;
       filter: blur(6px);
       transition: all 0.2s;
     }
     
     .graduensa:hover::after {
       filter: blur(4px);
       width: 100%;
       bottom: -5px;
       left: 0;
     }
     
     .graduensa:hover:active::after {
       filter: blur(10px);
     }

     • ::after: إنشاء ظل خلف الزر.
     • filter: blur(6px);: إضافة تأثير ضبابي.
     • عند التحويم hover والنقر active، يتغير حجم ووضوح الظل.

     دعم المتصفحات (IE و Edge):

                
             @supports (-ms-ime-align: auto) {
       .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
         display: none;
       }
     }
     
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       .graduensa {
         background: linear-gradient(to right, #780ee2, #da15f5);
       }
       .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
         display: none;
       }
     }

     إخفاء التأثيرات غير المدعومة في Internet Explorer و Edge القديم.

     الخلاصة

     • زر kefekty_animatsu: زر كبير مع خلفية متدرجة متحركة وتأثير ضبابي.
     • زر graduensa: زر صغير مع خلفية متدرجة وظل تفاعلي.

2. شرح الزر الثاني كلاس kefekty_animatsu:

   • HTML

      
             <a href="#" class="kefekty_animatsu">wesam devloper</a>
            

     • href="#": الرابط الذي سيتم فتحه عند النقر على الزر.

     • class="kefekty_animatsu": تطبيق التصميم المحدد في Css.

   • Css

               
     .kefekty_animatsu {
       position: relative;
       display: inline-block;
       width: 342px;
       height: 90px;
       text-align: center;
       line-height: 90px;
       color: #fff;
       font-size: 23px;
       text-transform: uppercase;
       text-decoration: none;
       font-family: sans-serif;
       box-sizing: border-box;
       background: linear-gradient(90deg, #15a1e0, #dc2c8e, #bdac18, #118dc5);
       background-size: 375%;
       border-radius: 12px;
       z-index: 1;
     }

     • position: relative;: يسمح بتحديد موقع العناصر الفرعية (مثل ::before) بالنسبة للزر.

     • width: 342px; height: 90px;: تحديد حجم الزر.

     • text-align: center; line-height: 90px;: توسيط النص داخل الزر.

     • color: #fff;: لون النص أبيض.

     • font-size: 23px;: حجم الخط.

     • text-transform: uppercase;: تحويل النص إلى أحرف كبيرة.

     • text-decoration: none;: إزالة التزيين (مثل الخطوط التحتية).

     • font-family: sans-serif;: نوع الخط.

     • background: linear-gradient(...);: خلفية متدرجة بألوان متعددة.

     • background-size: 375%;: تكبير الخلفية لإنشاء تأثير الحركة.

     • border-radius: 12px;: جعل حواف الزر مدورة

     • z-index: 1;: تحديد ترتيب الطبقات.

     تأثير الحركة (hover):

               
     .kefekty_animatsu:hover {
       animation: animate 8s linear infinite;
     }
     
     @keyframes animate {
       0% { background-position: 0%; }
       100% { background-position: 400%; }
     }

     • animation: animate 8s linear infinite;: تطبيق حركة متكررة عند تحريك المؤشر فوق الزر.

     • @keyframes animate: تحريك الخلفية من اليسار إلى اليمين.

     تأثير الضبابية ::before:

               
     .kefekty_animatsu:before {
       content: "";
       position: absolute;
       top: -5px;
       right: -5px;
       bottom: -5px;
       left: -5px;
       z-index: -1;
       background: linear-gradient(90deg, #179fdc, #d02785, #e2d02c, #1ba7e6);
       background-size: 400%;
       border-radius: 10px;
       opacity: 0;
       transition: .5s;
     }
     
     .kefekty_animatsu:hover:before {
       filter: blur(20px);
       opacity: 1;
       animation: animate 8s linear infinite;
     }

     • ::before: إنشاء عنصر وهمي خلف الزر.

     • filter: blur(20px);: إضافة تأثير ضبابي.

     • opacity: 0;: العنصر غير مرئي في البداية.

     • transition: .5s;: إضافة تأثير انتقالي سلس.

     • عند التحويم hover يصبح العنصر مرئيًا ويتم تطبيق تأثير الضبابية والحركة.