حصرياتالمزيد

الخميس، 8 أغسطس 2019

احصل على هذة الاداة من هنا

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



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

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





طريقة التركيب
  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>


EmoticonEmoticon