Front-end Animation Theme: Inspiring Button Effects

Posted by thesaleboat on Fri, 02 Aug 2019 05:03:51 +0200

This article is from "Xintan Blog" Of Animation Design Button Effect More articles Github

Welcome exchanges and Star

A list of special effects

Slide box:

Jelly:

Pulse:

Flash of light:

Bubble:

Sliding box special effect

Design sketch

principle

Because the button element can use before/after pseudo-elements, the cover layer in the dynamic graph can be realized by using pseudo-elements.

To avoid reflux redrawing, the slider moves in a vertical direction, so the scaleY attribute is used. For the direction of animation, we need to use transform-origin to change the origin of the animation.

code implementation

html: 

<button>xin-tan.com</button>

css: 

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #40a9ff;
  padding: 0.5em 1em;
}

button::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fa541c;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.4s ease-in-out;
}

button:hover {
  cursor: pointer;
}

button:hover::before {
  transform-origin: center top;
  transform: scaleY(1);
}

Special effect of jelly

Design sketch

Principle and code

Jelly effects can be divided into five parts, so it can not be achieved simply by transition, but by animation. And the time when the animation triggers is when the mouse moves in, so animation has to declare it in: hvoer.

button {
  z-index: 1;
  color: white;
  background: #40a9ff;
  outline: none;
  border: none;
  padding: 0.5em 1em;
}

button:hover {
  cursor: pointer;
  animation: jelly 0.5s;
}

Let's start writing special effects for jelly animation. The animation can be divided into four parts: "Initial => Squeezing => Flattening => Back to Initial State". Squeezing and flattening are achieved here by scale. The code is as follows:

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

  33% {
    transform: scale(0.9, 1.1);
  }

  66% {
    transform: scale(1.1, 0.9);
  }
}

Further more

The above dynamic simulation is good, if the four parts are changed into five parts: "Initial => Extrusion height => Flattening => Extrusion height => Back to the initial state". Visually there will be a spring effect, just like the effect of hand-pressed jelly:

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

  25%,
  75% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }
}

Pulse effect

Design sketch

Principle and code

First, remove the default button style. Note to set the z-index attribute of button and make it work. Make sure that it is larger than: before's z-index attribute to prevent dom elements from being overwritten by pseudo elements.

button {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  padding: 0.5em 1em;
  color: white;
  background-color: #1890ff;
}

button:hover {
  cursor: pointer;
}

All that's left is to set up pseudo elements. Because the pulse effect gives people the feeling of "hollow" amplification. Therefore, the change object is the border attribute. The hollow effect is achieved through transparent background.

button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 4px solid #1890ff;
  transform: scale(1);
  transform-origin: center;
}

The animation start time is the mouse move in, the change on the border is that the color becomes lighter and smaller, and the transparency gradually becomes 0.

button:hover::before {
  transition: all 0.75s ease-out;
  border: 1px solid#e6f7ff;
  transform: scale(1.25);
  opacity: 0;
}

transition and transform ation are pseudo-elements placed in the hover state in order to make the animation instantly return to its original state.

Flash effect

Design sketch

Principle and code

Realization is still based on pseudo-elements, flash effects pay more attention to color matching, the core of animation is to use rotate to achieve the "tilt" effect, and translate 3D to achieve the "flicker" effect.

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #262626;
  padding: 0.5em 1em;
  overflow: hidden;
  --shine-width: 1.25em;
}

button::after {
  content: "";
  z-index: -1;
  position: absolute;
  background: #595959;
  /* Core Code: Step by Step Position Adjustment */
  top: -50%;
  left: 0%;
  bottom: -50%;
  width: 1.25em;
  transform: translate3d(-200%, 0, 0) rotate(35deg);
  /*  */
}

button:hover {
  cursor: pointer;
}

button:hover::after {
  transition: transform 0.5s ease-in-out;
  transform: translate3d(500%, 0, 0) rotate(35deg);
}

Trans 3D not only avoids redraw reflow, but also enables GPU acceleration with higher performance. But for the sake of convenience, the translate attribute was commonly used.

Bubble effect

Design sketch

Principle and code

First, disable the default style of button elements and adjust the color matching:

button {
  outline: none;
  border: none;
  cursor: pointer;
  color: white;
  position: relative;
  padding: 0.5em 1em;
  background-color: #40a9ff;
}

Because the pseudo-element hierarchy of button overrides button, the z-index attribute should be set to prevent pseudo-elements from hiding the display. After all, you just want to cover up the background color, fonts don't need to cover up. Add:

button {
  z-index: 1;
  overflow: hidden;
}

Finally, the change effect of pseudo-elements is dealt with. Special effects spread from the center to the periphery, so they should be in the middle.

For size changes, use the scale attribute.

Because it's circular, you can set border-radius to 50%.

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  transition: transform 0.45s ease-in-out;
}

button:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(15, 15);
}

Change direction?

The bubble effect in the sample code diffuses from the middle to the surrounding area. What if you want to diffuse from the upper left corner to the lower right corner? For example, as shown in the following figure:

The process is simple, just change the initial position of the bubble.

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  /* Code for changing location */
  top: 0;
  left: 0;
  transform-origin: center;
  transform: scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
  /* *********** */
}

button:hover::before {
  transform: scale3d(15, 15, 15);
}

Reference link

More articles

Topics: Front-end Attribute Spring css3

Hot Topics

©2024 Programmer Think