Css button border animation

Animating Border

I proposed this challenge in the Animation at Work Slack and again on Twitter. Though there was no consensus on the best approach, I did receive some really clever ideas by some phenomenal developers.

Method 1: Animating border

The most straightforward way to animate a border is… well, by animating border .

.border-button < border: solid 5px #FC5185; transition: border-width 0.6s linear; >.border-button:hover

Nice and simple, but there are some big performance issues.

Since border takes up space in the document’s layout, changing the border-width will trigger layout. Nearby elements will shift around because of the new border size, making browser reposition those elements every frame of the animation unless you set an explicit size on the button.

As if triggering layout wasn’t bad enough, the transition itself feels “stepped”. I’ll show why in the next example.

Method 2: Better border with outline

How can we change the border without triggering layout? By using outline instead! You’re probably most familiar with outline from removing it on :focus styles (though you shouldn’t), but outline is an outer line that doesn’t change an element’s size or position in the layout.

.border-button < outline: solid 5px #FC5185; transition: outline 0.6s linear; margin: 0.5em; /* Increased margin since the outline expands outside the element */ >.border-button:hover

A quick check in Dev Tools’ Performance tab shows the outline transition does not trigger layout. Regardless, the movement still seems stepped because browsers are rounding the border-width and outline-width values so you don’t get sub-pixel rendering between 5 and 6 or smooth transitions from 5.4 to 5.5 .

Strangely, Safari often doesn’t render the outline transition and occasionally leaves crazy artifacts.

Method 3: Cut it with clip-path

First implemented by Steve Gardner, this method uses clip-path with calc to trim the border down so on hover we can transition to reveal the full border.

.border-button < /* Full width border and a clip-path visually cutting it down to the starting size */ border: solid 10px #FC5185; clip-path: polygon( calc(0% + 5px) calc(0% + 5px), /* top left */ calc(100% - 5px) calc(0% + 5px), /* top right */ calc(100% - 5px) calc(100% - 5px), /* bottom right */ calc(0% + 5px) calc(100% - 5px) /* bottom left */ ); transition: clip-path 0.6s linear; >.border-button:hover < /* Clip-path spanning the entire box so it's no longer hiding the full-width border. */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); >

clip-path technique is the smoothest and most performant method so far, but does come with a few caveats. Rounding errors may cause a little unevenness, depending on the exact size. The border also has to be full size from the start, which may make exact positioning tricky.

Unfortunately there’s no IE/Edge support yet, though it seems to be in development. You can and should encourage Microsoft’s team to implement those features by voting for masks/clip-path to be added.

Method 4: linear-gradient background

We can simulate a border using a clever combination of multiple linear-gradient backgrounds properly sized. In total we have four separate gradients, one for each side. The background-position and background-size properties get each gradient in the right spot and the right size, which can then be transitioned to make the border expand.

.border-button < background-repeat: no-repeat; /* background-size values will repeat so we only need to declare them once */ background-size: calc(100% - 10px) 5px, /* top & bottom */ 5px calc(100% - 10px); /* right & left */ background-position: 5px 5px, /* top */ calc(100% - 5px) 5px, /* right */ 5px calc(100% - 5px), /* bottom */ 5px 5px; /* left */ /* Since we're sizing and positioning with the above properties, we only need to set up a simple solid-color gradients for each side */ background-image: linear-gradient(0deg, #FC5185, #FC5185), linear-gradient(0deg, #FC5185, #FC5185), linear-gradient(0deg, #FC5185, #FC5185), linear-gradient(0deg, #FC5185, #FC5185); transition: all 0.6s linear; transition-property: background-size, background-position; >.border-button:hover

This method is quite difficult to set up and has quite a few cross-browser differences. Firefox and Safari animate the faux-border smoothly, exactly the effect we’re looking for. Chrome’s animation is jerky and even more stepped than the outline and border transitions. IE and Edge refuse to animate the background at all, but they do give the proper border expansion effect.

Method 5: Fake it with box-shadow

Hidden within box-shadow ‘s spec is a fourth value for spread-radius . Set all the other length values to 0px and use the spread-radius to build your border alternative that, like outline , won’t affect layout.

.border-button < box-shadow: 0px 0px 0px 5px #FC5185; transition: box-shadow 0.6s linear; margin: 0.5em; /* Increased margin since the box-shado expands outside the element, like outline */ >.border-button:hover

The transition with box-shadow is adequately performant and feels much smoother, except in Safari where it’s snapping to whole-values during the transition like border and outline .

Several of these techniques can be modified to use a pseudo-element instead, but pseudo-elements ended up causing some additional performance issues in my tests.

For the box-shadow method, the transition occasionally triggered paint in a much larger area than necessary. Reinier Kaper pointed out that a pseudo-element can help isolate the paint to a more specific area. As I ran further tests, box-shadow was no longer causing paint in large areas of the document and the complication of the pseudo-element ended up being less performant. The change in paint and performance may have been due to a Chrome update, so feel free to test for yourself.

I also could not find a way to utilize pseudo-elements in a way that would allow for transform based animation.

You may be firing up Twitter to helpfully suggest using transform: scale for this. Since transform and opacity are the best style properties to animate for performance, why not use a pseudo-element and have the border scale up & down?

.border-button < position: relative; margin: 0.5em; border: solid 5px transparent; background: #3E4377; >.border-button:after < content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: solid 10px #FC5185; margin: -15px; z-index: -1; transition: transform 0.6s linear; transform: scale(0.97, 0.93); >.border-button:hover::after

1. The border will show through a transparent button. I forced a background on the button to show how the border is hiding behind the button. If your design calls for buttons with a full background, then this could work.
2. You can’t scale the border to specific sizes. Since the button’s dimensions vary with the text, there’s no way to animate the border from exactly 5px to 10px using only CSS. In this example I’ve done some magic-numbers on the scale to get it to appear right, but that won’t be universal.
3. The border animates unevenly because the button’s aspect ratio isn’t 1:1. This usually means the left/right will appear larger than the top/bottom until the animation completes. This may not be an issue depending on how fast your transition is, the button’s aspect ratio, and how big your border is.

If your button has set dimensions, Cher pointed out a clever way to calculate the exact scales needed, though it may be subject to some rounding errors.

If we loosen our rules a bit, there are many interesting ways you can animate borders. Codrops consistently does outstanding work in this area, usually utilizing SVGs and JavaScript. The end results are very satisfying, though they can be a bit complex to implement. Here are a few worth checking out:

There’s more to borders than simply border , but if you want to animate a border you may have some trouble. The methods covered here will help, though none of them are a perfect solution. Which you choose will depend on your project’s requirements, so I’ve laid out a comparison table to help you decide.

My recommendation would be to use box-shadow, which has the best overall balance of ease-of-implementation, animation effect, performance and browser support.

Do you have another way of creating an animated border? Perhaps a clever way to utilize transforms for moving a border? Comment below or reach me on Twitter to share your solution to the challenge.

Источник

25+ Best CSS Border Animation

Title:- Button Border Hover Effects
Author:- Sarath AR
Made With:- HTML CSS

Title:- CSS-only border animation
Author:- Danny Joris
Made With:- HTML CSS

Title:- True dotted borders using svg and border-image
Author:- lucas lemonnier
Made With:- HTML CSS

Title:- All the border-radius’
Author:- Chris Coyier
Made With:- HTML CSS

Title:- Profile Card Hover Effect
Author:- P
Made With:- HTML CSS

Title:- Border transformations
Author:- yuanchuan
Made With:- HTML CSS

Title:- Fancy border button
Author:- Tobias Reich
Made With:- HTML CSS

Title:- CSS transform border button hover effects
Author:- Les
Made With:- HTML CSS

Title:- Border Animation Effect with SVG
Author:- GIO
Made With:- HTML CSS

Title:- Button Border Slide Mixin
Author:- Thomas Vaeth
Made With:- HTML CSS

Title:- Input Focus & Placeholder Effects with CSS3
Author:- Emil Devantie Brockdorff
Made With:- HTML CSS JAVASCRIPTS

Title:- Rainbow Border Button
Author:- Chris Coyier
Made With:- HTML CSS

See the Pen Corner Border Link by Vian Esterhuizen (@heyvian) on CodePen.

Title:- Corner Border Link
Author:- Vian Esterhuizen
Made With:- HTML CSS

Title:- Gradient border + border-radius
Author:- Shaw
Made With:- HTML CSS

See the Pen Buttons by Elitsa Dimitrova (@elitsa_dimitrova) on CodePen.

Title:- Buttons
Author:- Elitsa Dimitrova
Made With:- HTML CSS

Title:- SVG Gradient Border – Button
Author:- fencepencil
Made With:- HTML CSS

Title:- Border composition and animation
Author:- paolo cavanna
Made With:- HTML CSSfr

Title:- CSS Border style transitions
Author:- Giana
Made With:- HTML CSS JAVASCRIPT

Title:- [PURE CSS] border animation without svg
Author:- Rplus
Made With:- HTML CSS

Title:- Imperfect Buttons
Author:- Tiffany Rayside
Made With:- HTML CSS

Title:- Sass button border hover effect mixin
Author:- Giana
Made With:- HTML CSS

Title:- CSS Border Animation
Author:- Nick
Made With:- HTML CSS

Title:- CSS border (using an SVG)
Author:- Louis Hoebregts
Made With:- HTML CSS

Title:- Single element CSS border animation & ripple
Author:- Peter Norton
Made With:- HTML CSS

Title:- Colorful CSS Buttons
Author:- Chris Deacy
Made With:- HTML CSS

Title:- Button Hover States
Author:- James Power
Made With:- HTML CSS

Title:- Animated CSS Gradient Border
Author:- Mike Schultz
Made With:- HTML CSS

Title:- Sass button border hover effect mixin
Author:- Giana
Made With:- HTML CSS

Title:- Gradient text border background Button With Animation
Author:- Monkey Company
Made With:- HTML CSS

Title:- Border animation (circle)
Author:- katmai7
Made With:- HTML CSS

See the Pen border-animation-css by Swarup Kumar Kuila (@uiswarup) on CodePen.

Title:- border-animation-css
Author:- Swarup Kumar Kuila
Made With:- HTML CSS

Title:- SVG Border Animation 1
Author:- Zach Saucier
Made With:- HTML CSS

Title:- [PURE CSS] border animation without svg
Author:- Rplus
Made With:- HTML CSS

Title:- [PURE CSS] border animation without svg
Author:- Rplus
Made With:- HTML CSS

Title:- Border animation
Author:- Inderpreet Singh
Made With:- HTML CSS

Similar Posts

7 CSS Wave text effects

Check Out Handpicked CSS Wave text effects made with HTML CSS Creating and Styling Wave Text. See the Pen Wave Text by Swarup Kumar Kuila (@uiswarup) on CodePen. Title:- Wave TextAuthor:- Swarup Kumar KuilaMade With:- HTML CSS JAVASCRIPT See the Pen Wave text effect (with SVG/blend mode) by Lucas Bebber (@lbebber) on CodePen. Title:- Wave…

20 CSS Thumbnail effect

See the Pen THUMBNAIL HOVER EFFECTS by Nikhil Krishnan (@nikhil8krishnan) on CodePen. Pure CSS3 image thumbnail effects, also we can easily change the grid item per row using by sass variable. Title:- THUMBNAIL HOVER EFFECTSAuthor:-Nikhil KrishnanMade With:-HTML CSS See the Pen Thumbnail Presentation with CSS Grid by Aysha Anggraini (@rrenula) on CodePen. This was fun…

30+ CSS Tabs Example

See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen. Title:- Pure CSS HTML TabsAuthor:-Wallace ErickMade With:- HTML CSS See the Pen Material Design CSS Only Tabs by Ben Mildren (@mildrenben) on CodePen. Title:- Material Design CSS Only TabsAuthor:- Ben MildrenMade With:- HTML CSS See the Pen Light & Sexy Tabs by Alex…

Top 11 Best free Online Code Editor for Web Developers in 2020

Online code editors are nice relating to writing and accessing your code from anyplace. These web-based code editors are additionally useful for sharing your code with others or for demoing your project, and for doing collaborative modifying with different developers. Online code editor 1.Codepen(Recommend) code pen is the most popular online code editor. The code…

40+ Stunning CSS Hover Effects Example

See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen. Title:- 10 stylish hover effects with lessAuthor:- Renan C. AraujoMade With:- HTML CSS See the Pen 10 stunning hover effects with sass by Renan C. Araujo (@caraujo) on CodePen. Title:- 10 stunning hover effects with sassAuthor:- Renan C. AraujoMade…

40+ Best CSS Timeline Examples For Developers

CSS Timeline examples are a great way to learn how CSS works, as well as how to build your own. See the Pen Angular Animated Vertical Timeline by Stephen McCann (@flatsteve) on CodePen. Title:- Angular Animated Vertical TimelineAuthor:- Stephen McCannMade With:- HTML CSS JAVASCRIPT See the Pen Process Timeline by Pop Razvan (@roppazvan) on CodePen….

Источник