Button hover effect

การใส่ลูกเล่นให้กับปุ่ม เราสามารถทำได้หลายรูปแบบ สำหรับวันนี้เราจะมาสอนการทำให้ปุ่มของเราเปลี่ยนสีได้และสวยขึ้น ดังนี้ค่ะ

โค้ด HTML

<a class="button" href="#">Button</a>
<a class="button" href="#">Button</a>
<a class="button" href="#">Button</a>

CSS

.button {
	position: relative;
	display: inline-block;
	padding: .9em 4em;
	color: #000;
	text-align: center;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	transition: all .5s;
}
.button::before,
.button::after {
	position: absolute;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	transition: all .5s;
}
.button::before {
	top: 0;
	left: 0;
	border-top: 2px solid #2a14f7;
	border-left: 2px solid #2a14f7;
}
.button::after {
	right: 0;
	bottom: 0;
	border-right: 2px solid #2a14f7;
	border-bottom: 2px solid #2a14f7;
}
.button:hover {
	background-color: #9bfbc6;
	color: #000;
	transition: all .7s;
}
.button:hover::before,
.button:hover::after {
	width: 0;
	height: 0;
	opacity: 0;
	transition: all .7s;
}

 
DEMO

Comments