Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body{
- margin: 0;
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background: #031321;
- font-family: consolas;
- }
- a{
- position: relative;
- display: inline-block;
- padding: 15px 30px;
- color: #2196f3;
- text-transform: uppercase;
- letter-spacing: 4px;
- text-decoration: none;
- font-size: 24px;
- overflow: hidden;
- transition: 0.2s;
- }
- a:hover{
- color: #255784;
- background: #2196f3;
- box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
- transition-delay: 1s;
- }
- a span{
- position: absolute;
- display: block;
- }
- a span:nth-child(1) {
- top: 0;
- left: -100%;
- width: 100%;
- height: 2px;
- background: linear-gradient(90deg,transparent,#2196f3);
- }
- a:hover span:nth-child(1){
- left: 100%;
- transition: 1s;
- }
- a span:nth-child(3) {
- bottom: 0;
- right: -100%;
- width: 100%;
- height: 2px;
- background: linear-gradient(270deg,transparent,#2196f3);
- }
- a:hover span:nth-child(3){
- right: 100%;
- transition: 1s;
- transition-delay: 0,5s;
- }
- a span:nth-child(2) {
- top: -100%;
- right: 0;
- width: 2px;
- height: 100%;
- background: linear-gradient(180deg,transparent,#2196f3);
- }
- a:hover span:nth-child(2){
- right: 100%;
- transition: 1s;
- transition-delay: 0,25s;
- }
- a span:nth-child(4) {
- top: -100%;
- right: 0;
- width: 2px;
- height: 100%;
- background: linear-gradient(360deg,transparent,#2196f3);
- }
- a:hover span:nth-child(4){
- right: 100%;
- transition: 1s;
- transition-delay: 0,75s;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement