Guest User

Untitled

a guest
Feb 29th, 2020
134
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. body{
  2.   margin: 0;
  3.   padding: 0;
  4.   display: flex;
  5.   justify-content: center;
  6.   align-items: center;
  7.   min-height: 100vh;
  8.   background: #031321;
  9.   font-family: consolas;
  10. }
  11.  
  12. a{
  13.   position: relative;
  14.   display: inline-block;
  15.   padding: 15px 30px;
  16.   color: #2196f3;
  17.   text-transform: uppercase;
  18.   letter-spacing: 4px;
  19.   text-decoration: none;
  20.   font-size: 24px;
  21.   overflow: hidden;
  22.   transition: 0.2s;
  23. }
  24.  
  25. a:hover{
  26.   color: #255784;
  27.   background: #2196f3;
  28.   box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
  29.   transition-delay: 1s;
  30. }
  31.  
  32. a span{
  33.   position: absolute;
  34.   display: block;
  35. }
  36.  
  37. a span:nth-child(1) {
  38.   top: 0;
  39.   left: -100%;
  40.   width: 100%;
  41.   height: 2px;
  42.   background: linear-gradient(90deg,transparent,#2196f3);
  43. }
  44.  
  45. a:hover span:nth-child(1){
  46.   left: 100%;
  47.   transition: 1s;
  48. }
  49.  
  50. a span:nth-child(3) {
  51.   bottom: 0;
  52.   right: -100%;
  53.   width: 100%;
  54.   height: 2px;
  55.   background: linear-gradient(270deg,transparent,#2196f3);
  56. }
  57.  
  58. a:hover span:nth-child(3){
  59.   right: 100%;
  60.   transition: 1s;
  61.   transition-delay: 0,5s;
  62. }
  63.  
  64. a span:nth-child(2) {
  65.   top: -100%;
  66.   right: 0;
  67.   width: 2px;
  68.   height: 100%;
  69.   background: linear-gradient(180deg,transparent,#2196f3);
  70. }
  71.  
  72. a:hover span:nth-child(2){
  73.   right: 100%;
  74.   transition: 1s;
  75.   transition-delay: 0,25s;
  76. }
  77.  
  78. a span:nth-child(4) {
  79.   top: -100%;
  80.   right: 0;
  81.   width: 2px;
  82.   height: 100%;
  83.   background: linear-gradient(360deg,transparent,#2196f3);
  84. }
  85.  
  86. a:hover span:nth-child(4){
  87.   right: 100%;
  88.   transition: 1s;
  89.   transition-delay: 0,75s;
  90. }
RAW Paste Data