6 Cool CSS3 button border animation effects, 6 Cool css3 borders

6 Cool CSS3 button border animation effects, 6 Cool css3 borders

This is a very cool CSS3 button border animation effect. This set of Button border animations has 6 different effects. When the mouse slides over the button, the button's border will be different ways of animation, the effect is very cool.

Download Online Preview source code

Method of use: HTML Structure

The buttons in the CSS 3 button border animation effect use the HTML<Button>Element. Set different classes for non-standard effects. For example, the first effect class isDraw.

<Button class = "draw"> draw </button>

CSS style

In the CSS style, first set some basic styles for the button and remove the style of the native button.

Button {background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 2px # f45e61; color: # f45e61; font-size: inherit; font-weight: 700; margin: 1em; padding: 1em 2em; text-align: center; text-transform: capitalize; position: relative; vertical-align: middle ;} button: before, button: after {box-sizing: border-box; content: ''; position: absolute; width: 100%; height: 100% ;}

The above is the first method for creating line animation effects. For other CSS codes, see download files.