1. Achieve results

2. Implementation steps

Define a rectangle button as shown

<div> Susu is susu </div>Copy the code

div {
	border: 1px solid #EDEDED;
	padding: 0 40px;
	display: block;
	line-height: 40px;
	-webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
	color: #FFF;
	font-weight: 600;
	position: relative;
}
Copy the code

Add two pseudo-elements to it

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
div:after,
div:before {
	box-sizing: border-box;
	border: 1px solid transparent;
	width: 0;
	height: 0;
	content: "'; display: block; position: absolute; user-select: none; } div:before { bottom: 0; right: 0; - Webkit-transition: border color 0.2s ease-in 0.2s, width 0.2s ease-in 0.2s, height 0.2s ease-in; Transition: border color 0.4s ease-in 0.4s, width 0.2s ease-in 0.4s, height 0.2s ease-in; } div:after { top: 0; left: 0; -Webkit-transition: border color: 0.8s ease-in 0.8s, width: 0.2s ease-in 0.2s, height: 0.2s ease-in 0.2s; Transition: border color 0.8s ease-in 0.8s, width 0.2s ease-in 0.2s, height 0.2s ease-in 0.2s; }Copy the code

Hover:

div:hover {
	border: 1px solid #ffff00;
}
div:hover:after,
div:hover:before {
	width: 100%;
	height: 100%;
}

div:hover:after {
	border-top-color: #ffff00;
	border-right-color: #ffff00;
	-webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
	transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}


div:hover:before {
	border-bottom-color: #ffff00;
	border-left-color: #ffff00;
	-webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
	transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}

Copy the code

3.transaction

The Transition property is a shorthand property that sets four transition properties:

Transition-property: Specifies the name of the CSS property that sets the transition effect. Transition-duration: specifies how many seconds or milliseconds it takes to complete the transition effect. Transition-timing-function: specifies the speed curve for the speed effect. Transition-delay: Defines when the transition effect starts.Tips: Always set the transition-duration property, otherwise a duration of 0 will not have a transition effect. The transition – the timing – function:

4. Implementation idea

The default width and height of the pseudo-element is 0. When the mouse is hovering, set the transition time to 100% width and height. In the above demo: border-top-color changes within 0.2s, border-right-color is delayed 0.2s and then a transition of 0.2s is completed. Border-left-color = “border-bottom-color”; border-left-color = “border-left-color”; border-left-color = “border-left-color”;

5. Complete the demo

demo