HOW TO CREATE BORDER BUTTON WITH USING HTML AND CSS LANGUAGE AND ALSO LE...

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;}}   

Tags

You May Like

Show more
Error 404: Results Not Found Use Correct /Label or /recent or /random code to Show Posts

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.