Code Copied
Whatsapp QR Code

Scan QR Code
or

Chat on Whatsapp
Phone Mail

This tutorial contains to know how to make an animated button with slicing border on hover. You can learn and use this codes to your project.

Demo

Hover over the button

Let's Start Coding

Step 1 : Add HTML

HTML HTML
<!DOCTYPE html>
<html>
<head>
<title> Border Slice Button </title>
</head>
<body>
<button class="btn_border_slice">Click
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</body>
</html>

Step 2 : Add CSS

CSS CSS
body {
background : green;
font-family : tahoma;
}

button {
background : none;
border : none;
outline : none;
cursor : pointer;
}

.btn_border_slice {
display : inline-block;
font-size : 20px;
text-align : center;
color : #fff;
padding : 5px 15px;
position : relative;
}

.btn_border_slice:hover {
color : #00ccff;
}

.btn_border_slice span {
position : absolute;
transition : transform 0.5s;
}

.btn_border_slice span:nth-child(1),
.btn_border_slice span:nth-child(3) {
width : 100%;
height : 2px;
background : #fff;
}

.btn_border_slice span:nth-child(1){
top : 0;
left : 0;
transform-origin : right;
}

.btn_border_slice span:nth-child(3){
bottom : 0;
left : 0;
transform-origin : left;
}

.btn_border_slice:hover span:nth-child(1){
transform : scaleX(0);
transform-origin : left;
transition : transform 0.5s;
}

.btn_border_slice:hover span:nth-child(3){
transform : scaleX(0);
transform-origin : right;
transition : transform 0.5s;
}

.btn_border_slice span:nth-child(2),
.btn_border_slice span:nth-child(4) {
width : 3px;
height : 100%;
background : #00ccff;
}

.btn_border_slice span:nth-child(2){
top : 0;
left : 0;
transform : scale(0);
transform-origin : bottom;
}

.btn_border_slice span:nth-child(4){
top : 0;
right : 0;
transform : scale(0);
transform-origin : top;
}

.btn_border_slice:hover span:nth-child(2){
transform : scale(1);
transform-origin : top;
transition : transform 0.5s;
}

.btn_border_slice:hover span:nth-child(4){
transform : scale(1);
transform-origin : bottom;
transition : transform 0.5s;
}

Browse my all Front End Designs to learn and use on your project to make it more functional.

More Front End Designs :