Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "how to achieve voluptuous button effects in the front end of web". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "web front-end how to achieve sexy button special effects" bar!

List of special effects

Slide box:

Jelly:

Pulse:

Flash:

Bubbles:

Slide box special effect picture

Principle

Because button elements can use before/after pseudo-elements, the masking layer in dynamic graphs can be implemented with pseudo-elements.

To avoid redrawing, the slide box moves vertically, so the scaleY property is used. For the direction of the animation, you need to change the origin of the animation with the help of transform-origin.

Code implementation

Html:

Xin-tan.com

Css:

Button {outline: none; border: none; z-index: 1; position: relative; color: white; background: # 40a9ff; padding: 0.5em 1mm;} 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);} Jelly Special effects

Principle and code

Jelly special effects can be divided into five parts, so it can not be achieved simply through transition, with the help of animation. And the time when the animation is triggered is when the mouse is moved in, so animation should be declared 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 the special effects of jelly animation. The animation can be divided into four parts: "initial = > squeeze height = > flattening = > return to the original state." Squeeze height and flatten here are realized through 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

The above dynamics have been simulated well, if you change the four parts into five parts: "initial = > squeeze height = > flatten = > squeeze height = > return to the initial state." Visually there will be a special effect of a spring, 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 Special effects

Principle and code

First, remove the default style of button. Be careful to set the z-index attribute of button and let it take effect, making sure that it is greater than the z-index attribute of:: before to prevent the dom element 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 the pseudo element. Because the pulse special effects give people the feeling of "hollowed-out" amplification. Therefore, the change object is the border property. The effect of hollowing out is achieved through a 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 start time of the animation is when the mouse is moved in, what changes on the border is that the color becomes lighter and the size becomes 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 are pseudo elements placed in the hover state to bring the animation back to its original state in an instant.

Flash special effect picture

Principle and code

The realization is still with the help of pseudo elements, flash special effects pay more attention to color matching, the core of animation is the use of rotate to achieve the "tilt" effect, the use of translate3d to achieve the "flash" effect.

Button {outline: none; border: none; z-index: 1; position: relative; color: white; background: # 262626; padding: 0.5em 1mm; overflow: hidden;-- shine-width: 1.25mm;} button::after {content: "; z-index:-1; position: absolute; background: # 595959; / * Core Code: step by step relocation * / 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);}

In addition to avoiding redrawing reflow, ⚠️ translate3d can also enable GPU acceleration for higher performance. Previously, however, the translate attribute was generally used for ease of presentation.

Bubble special effect diagram

Principle and code

First, disable the default style for the button element and adjust the color match:

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

Because the pseudo-element level of button overrides button, set the z-index attribute to prevent pseudo-elements from obscuring the display. After all, you only want the cover of the background color, and the font does not need to be covered. Add to the above style:

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

The last thing to deal with is the change effect of pseudo elements. The special effect spreads from the center to all sides, so it should be placed in the middle.

For size changes, the scale attribute is still used.

Because it is round, you can set border-radius to 50%.

Button::before {z-index:-1; content: "; position: absolute; top: 50%; left: 50%; width: 1mm; 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 spreads around from the middle. What if you want to spread from the upper left corner to the lower right corner? For example, the following figure shows:

The process is simple and only needs to change the initial position of the bubble.

Button::before {z-index:-1; content: "; position: absolute; width: 1em; height: 1mm; 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);} at this point, I believe you have a better understanding of "how to achieve sexy button effects in the front end of web". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.