HOW TO CREATE BORDER BUTTON WITH USING HTML AND CSS LANGUAGE AND ALSO LE...
HTML And CSS Cooding
August 21, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<button class="btn-hover">Border Animation
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</button>
</body>
</html>
CSS SOURCE CODE
*,::before,
::after {margin: 0;
padding: 0;
box-sizing: border-box;}
body {display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;}
button {position: relative;
font-size: 64px;
padding: 20px 40px;
color: #fff;
background: transparent;
border: none;
outline: none;
cursor: pointer;
z-index: 1;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
span {position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;}
.top {background: linear-gradient(90deg,transparent 50%,rgba(400, 305, 405, 20),rgb(40, 55, 255));}
.bottom {left: 100%;
top: 100%;
background: linear-gradient(90deg,rgb(300, 255, 255),rgba(200, 255, 305, 0.5),transparent 50%);}
.right {left: 100%;
width: 2px;
height: 0;
background: linear-gradient(180deg,transparent 30%,rgba(0, 255, 255, 0.5),rgb(0, 255, 255));}
.left {left: 0;
top: 100%;
width: 2px;
height: 0;
background: linear-gradient(180deg,rgb(0, 255, 255),rgba(0, 255, 255, 0.5),transparent 70%);}
.top {animation: animateTop 2s ease-in-out infinite;}
.bottom {animation: animateBottom 2s ease-in-out infinite;}
.right {animation: animateRight 2s ease-in-out infinite;}
.left {animation: animateLeft 2s ease-in-out infinite;}
@keyframes animateTop {100% {width: 100%;}}
@keyframes animateBottom {100% {left: 0;
width: 100%;}}
@keyframes animateRight {100% {height: 100%;}}
@keyframes animateLeft {100% {height: 100%;top: 0;}}
@media(max-width:576px){
button {position: relative;
font-size: 32px;
padding: 10px 20px;
color: #fff;
background: transparent;
border: none;
outline: none;
cursor: pointer;
z-index: 1;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}}
@keyframes animateRight {100% {height: 100%;}}
@keyframes animateLeft {100% {height: 100%;top: 0;}}
