اضافة أزرار بتأثير التدرج



السلام عليكم
ورحمة الله
وبركاته

في هذه التدوينة سنقدم لكم أزار يمكنك
اضافتها لمدونتك وربما قد تقول في نفسك
أنه من يحتاج لأزرار فكل المدونات تتوفر عليها
الان
لكن صديقي هذه الأزرار ليست كالموجودة بموقعك
اد أنها تمتاز بتأثير تدرج الألوان, كما أنها تضفي
الى موقعك نوعا من الجمالية





طريقة التركيب
  1. قم بنسخ كود الزر
  2. ثم ضعه في أي مكان يحلو لك
  • <style scoped='' type='text/css'>
  • .button {
  •   cursor: pointer;
  •   width: 250px;
  •   height: 85px;
  •   background: white;
  •   border-radius: 50px;
  •   background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
  •   animation: gradient 2.5s infinite 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.2) forwards;
  •   
  •   padding-top: 16px;
  •   display: flex;
  •   flex-direction: row;
  •   justify-content: center;
  •   align-items: center;  
  •   font-size: 50px;
  • }

  • @keyframes gradient {
  •   0% { background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%) }
  •   10% { background: linear-gradient(90deg, #d53369 0%, #daae51 100%) }
  •   20% { background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%) }
  •   30% { background: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%) }
  •   40% { background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%) }
  •   50% { background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%) }
  •   60% { background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%) }
  •   70% { background: linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%) }
  •   80% { background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%) }
  •   90% { background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%) }
  •   100% { background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%) }
  • }
  • </style>
  • <a target=”_blank” href="https://issamweeb.blogspot.com/"><div class="button" id="button">😸</div></a>

ليست هناك تعليقات:

إرسال تعليق