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
<!DOCTYPE html>
<html>
<head>
<body>
</html>
<html>
<head>
<title> Border Slice Button </title>
</head> <body>
<button class="btn_border_slice">Click
</body>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<span></span>
<span></span>
<span></span>
</html>
Step 2 : Add CSS
CSS
body {
button {
.btn_border_slice {
.btn_border_slice:hover {
.btn_border_slice span {
.btn_border_slice span:nth-child(1),
.btn_border_slice span:nth-child(3) {
.btn_border_slice span:nth-child(1){
.btn_border_slice span:nth-child(3){
.btn_border_slice:hover span:nth-child(1){
.btn_border_slice:hover span:nth-child(3){
.btn_border_slice span:nth-child(2),
.btn_border_slice span:nth-child(4) {
.btn_border_slice span:nth-child(2){
.btn_border_slice span:nth-child(4){
.btn_border_slice:hover span:nth-child(2){
.btn_border_slice:hover span:nth-child(4){
background : green;
font-family : tahoma;
} font-family : tahoma;
button {
background : none;
border : none;
outline : none;
cursor : pointer;
} 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;
} 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;
} transition : transform 0.5s;
.btn_border_slice span:nth-child(1),
.btn_border_slice span:nth-child(3) {
width : 100%;
height : 2px;
background : #fff;
} height : 2px;
background : #fff;
.btn_border_slice span:nth-child(1){
top : 0;
left : 0;
transform-origin : right;
} left : 0;
transform-origin : right;
.btn_border_slice span:nth-child(3){
bottom : 0;
left : 0;
transform-origin : left;
} left : 0;
transform-origin : left;
.btn_border_slice:hover span:nth-child(1){
transform : scaleX(0);
transform-origin : left;
transition : transform 0.5s;
} 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;
} 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;
} height : 100%;
background : #00ccff;
.btn_border_slice span:nth-child(2){
top : 0;
left : 0;
transform : scale(0);
transform-origin : bottom;
} 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;
} 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;
} 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;
}
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.