Those cool button interaction effects you don't know

In daily development, you must have encountered many places with button interaction, but have you used any cool interaction effects? In daily development, the most common effects are the background text discoloration, shadow, button press, loading, etc., which are relatively unremarkable, and are all step-by-step effects. When a good front-end page implements the design diagram, if it also has a strong interaction effect with the user, then the experience brought to the user is excellent. Recently, a group of relatively cool front-end button interaction animations have been compiled and shared with you today.

The main content shared today comes from [Aaron Iker
]( https://github.com/aaroniker ), if you are interested, you can go to see the original design. In order to facilitate domestic access, this article has been slightly edited and modified, and there are many codes involved. Only the core part of the code is shown in the article. The complete code can be found at the end of the article to see the source code. In particular , because there are many animations involving details, the amount of CSS code will be relatively high, and some effects depend on animation libraries such as gsap, animejs, three, etc. If you need to use it in an online environment, please pay attention to the overall performance impact, mainly buttons Reference and reference for interactive effects.

Favorite button

This interaction effect is suitable for when a user favorites or likes a certain content. Looking at the figure below, we can split the animation into the following steps. The interaction effect here is mainly the animation of stars.

• The stars rotate during the interaction
• There are two stages of moving up and down
• The star has changed to a circle in the middle
• Jumping out of the stars from the second paragraph changed the color
• At this time, the expression of the stars also changed to the corners of the mouth.

• During the process of jumping out of the stars, an ellipse is added to the bottom of the process from nothing to nothing and then to nothing.
  
  Start coding based on the above main animation process, which is implemented here using gsap, of course, using regular CSS is also feasible. The core code is as follows, the CSS part of the code is more, you can see the source code at the end of the article:

   // 上下跳出动画
  gsap.to(button, {
    keyframes: [{
        '--star-y': '-36px',
        duration: .3,
        ease: 'power2.out'
    }, {
        '--star-y': '48px',
        '--star-scale': .4,
        duration: .325,
        onStart() {
            // 中途变圆形
            button.classList.add('star-round')
        }
    }, {
        '--star-y': '-64px',
        '--star-scale': 1,
        duration: .45,
        ease: 'power2.out',
        onStart() {
            // 高亮黄色
            button.classList.toggle('active')
            setTimeout(() => button.classList.remove('star-round'), 100)
        }
    }, {
        '--star-y': '0px',
        duration: .45,
        ease: 'power2.in'
    }, {
        '--button-y': '3px',
        duration: .11
    }, {
        '--button-y': '0px',
        '--star-face-scale': .65,
        duration: .125
    }, {
        '--star-face-scale': 1,
        duration: .15
    }],
    clearProps: true,
    onComplete() {
        button.classList.remove('animated')
    }
  })
  // 底部圆形变化
  gsap.to(button, {
    keyframes: [{
        '--star-hole-scale': .8,
        duration: .5,
        ease: 'elastic.out(1, .75)'
    }, {
        '--star-hole-scale': 0,
        duration: .2,
        delay: .2
    }]
  })
  // 星星旋转
  gsap.to(button, {
    '--star-rotate': '360deg',
    duration: 1.55,
    clearProps: true
  })

  publish button

  This interaction effect is suitable for releasing new versions, submitting cloud deployment and other types of functions, observe the following animations and analyze the animation steps as follows:

• The arrow starts to stretch when the button is clicked
• Small clouds moving downwards appear on the background of arrows
• ☑️ small icon appears when upload is complete

• Copywriting changes: before processing - in process - processing completed
  
  The first is the expansion and contraction effect of the arrow in the button, which will also have this effect when hovering the button, --icon-arrow-y change the y-axis value of the arrow, --icon-line-offset change the height of the arrow itself.

   fromTo(button, {
    '--icon-arrow-y': '0px',
    '--icon-line-offset': '21px',
    duration: .15
  }, {
    repeat: -1,
    keyframes: [{
        '--icon-arrow-y': '-6px',
        '--icon-line-offset': '24px',
        duration: .6,
    }, {
        '--icon-arrow-y': '0px',
        '--icon-line-offset': '21px',
        duration: .85,
        ease: 'power2.out'
    }]
  })

  Then create the animation of the clouds, because the elements are removed after the clouds fly out, so start a timer to continuously create the clouds.

   function createCloud(node, parent) {
    let elem = node.cloneNode(true)
    parent.appendChild(elem)
    set(elem, {
        x: gsap.utils.random(-8, 8),
        y: -36
    })
    to(elem, {
        y: 36,
        duration: gsap.utils.random(.4, 1.5),
        onComplete() {
            elem.remove()
        }
    })
  }
  // 定时创建
  cloudInterval = setInterval(() => {
    createCloud(clone, button.querySelector('.icon'))
  }, 400)

  The last is the end state. At the end, the clouds and arrows are removed, a small icon with ☑️ is displayed, and the text is changed.

 clearInterval(cloudInterval)
// 将箭头移动到可视区外
to(button, {
    duration: .25,
    keyframes: [{
        '--icon-line-offset': '13px'
    }, {
        '--icon-arrow-offset': '4px'
    }]
})
// 显示带☑️小图标
to(button, {
    '--icon-tick-offset': '0px',
    duration: .25,
    delay: .3
})
to(button, {
    '--icon-circle-scale': 1,
    duration: .7,
    delay: .2,
    ease: 'elastic.out(1, .75)'
})

The entire state copy is displayed by controlling the transparency and y-axis offset of the element, and the state copy control code is completed when the following is completed.

 span {
    opacity: var(--o, var(--text-normal-o));
    transform: translateY(var(--y, var(--text-normal-y))) translateZ(0);
    &.done {
        --o: var(--text-done-o);
        --y: var(--text-done-y);
    }
}

 // 完成状态显示
to(button, {
    '--text-done-o': 1,
    '--text-done-y': '0px',
    duration: .3,
    delay: .1
})

button star effect

This interactive effect is suitable for use when github gives stars to open source projects, and can also be used for scenarios such as starring and likes. This effect uses threejs in addition to gsap. By observing the following animations, it can be analyzed that the animation mainly has the following steps:

• 3D stars with flip animation on mouseover
• When the button is clicked, the star will produce a parabolic trajectory to the number behind the button
• When the star passes the button number, the number +1, and the +1 text and the star fly out together
• The copy changes and moves to the left when clicked
  
  The overall effect is very dazzling, the effect of increasing the number of stars is very real, and the movement trajectory of the stars makes the interactive effect icing on the cake. Paste the code of the motion trajectory of the stars here. Other codes involve more threejs drawing stars. If you are interested, you can view the source code.

 gsap.to(object.position, {
  duration: 0.7,
  motionPath: {
    path: [
      {
        x: 0,
        y: -0.5,
      },
      {
        x: 5.45,
        y: -5,
      },
      {
        x: 10.9,
        y: -0.5,
      },
      {
        x: 7,
        y: 7,
      },
    ],
    curviness: 1.2,
  },
  ease: "sine.in",
});

delete button

This interaction effect is suitable for deletion logic, and the meaning of deletion is very real. When the delete button is clicked, the animation effect steps are as follows:

• Click the icon on the left side of the button to pan and center it to display and change the icon form, the button copy fades out and hides
• From top to bottom, the blue paper changes to a blue bar as it passes through the shredder icon, visualizing the function of the shredder
• When the blue bar moves out of the icon, a tick blue icon appears below it, which means the execution is complete
  

The code here is implemented in pure CSS, without using other animation libraries, click the button to add a class, and achieve animation effects through different classes in CSS. The following code briefly lists the changes of several of these properties:

 .delete-button { 
    span {
        opacity: var(--span-opacity, 1);
        transform: translateX(var(--span-x, 0)) translateZ(0);
        transition: transform .4s ease var(--span-delay, .2s), opacity .3s ease var(--span-delay, .2s);
    }
    .trash {
        transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, .64));
    }
    // 点击后
    &.delete {
        // 文案隐藏
        --span-opacity: 0;
        --span-x: 16px;
        --span-delay: 0s;
        // 图标居中显示
        --trash-x: 46px;
        --trash-y: 2px;
        --trash-scale: 1;
        --trash-lines-opacity: 0;
        --trash-line-scale: 0;
    }
}

Like button

This interactive effect is suitable for the scene where the user likes. The main highlight is the action of the thumb, which perfectly interprets the action of the like in the real scene. The whole animation steps can be disassembled as follows:

• Palm down and thumb down on mouseover
• When the button is clicked, the thumb pops up, and the entire icon has a slight upward animation
• When you click Done, the button changes color and the text changes
  
  The implementation here uses the click to add class combined with the gsap implementation. First, let's look at the subtle thumb animation. The entire thumb is implemented by an element and a pseudo-element, and the hover style can change the angle of its rotation after the style is clicked.

 // 未点击hover时
&:not(.liked) {
    &:hover {
        --hand-rotate: 8;
        --hand-thumb-1: -12deg;
        --hand-thumb-2: 36deg;
    }
}
// 默认
.thumb {
    transform: scale(.85) translateY(-.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
    &:before {
        transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
    }
}

Here --hand-rotate is the animation control of the entire palm, using the calling method of gsap.

 gsap.fromTo(button, {
    '--hand-rotate': 8
}, {
    ease: 'none',
    keyframes: [{
        '--hand-rotate': -45,
        duration: .16,
        ease: 'none'
    }, {
        '--hand-rotate': 15,
        duration: .12,
        ease: 'none'
    }, {
        '--hand-rotate': 0,
        duration: .2,
        ease: 'none',
        clearProps: true
    }]
});

submit button

This interaction logic applies to the effect after the mall submits the order. After the submit button, there will be an animation effect of the package being loaded and transported away, giving the user the impression that the delivery speed is very fast. The main animation is disassembled into the following steps:

• When the button is clicked, it collapses into a progress bar
• A truck appears above the progress bar and a package loading appears
• The truck moves from left to right and the progress bar fills up
• The button restores the original text changes and adds a green tick
  

There are many elements in this effect, and it takes a lot of work for just one truck. It also has a progress bar prompt. Because there are many animation steps and details involved, it is still implemented using gsap. Based on this, the effect can be improved. Slightly modified to the interaction of the download button, as shown in the figure below, but here is a package that falls after the truck appears, which is more suitable for the download scene.

progress button

This interaction effect is suitable for scenarios where the button execution time is relatively long, such as when uploading or downloading. This kind of function is usually encountered more often, and most of them add a loading process, but the following effects are believed to give you new Inspiration, the effect of this part is more and will not be explained in detail.

The whole process below is from a white background to a successful blue background, plus the animation of the text and icons fading in and out. The whole process does not give the user a very boring feeling. The borders, percentages and loading are all changing, which is relatively comparison. enriched.

Some people may say that there are too many button elements for this effect, so look at the following relatively simple, if it is uploading, you can change the direction of the arrow and complete the transition from bottom to top.

Finally, there is a form in which the progress is displayed with a circle, and the effect is also very simple and comfortable.

Source code online preview

https://code.juejin.cn/pen/7144732377703514144

Finish

Today, the overall button interaction sharing is over. I believe seeing these effects will bring some inspiration to the development. Next time the boss or business side says that your effect is not dazzling enough, come up with this effect , stunned their jaws. However, the daily front-end development is to restore the design draft. The design draft is not necessarily the case, but it can be given to them for reference in suitable scenarios. Good interaction effects give users a great feeling, and we can achieve better interaction effects for users. It's a great feeling too, yeah

If you find it useful after reading this article, remember to give a like and support, and you may use it one day if you collect it.

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)

refer to

gsap official website

aaroniker

tin-fung-hk