#212121
1button { 2 position: relative; 3 width: 11em; 4 height: 4em; 5 outline: none; 6 transition: 0.1s; 7 background-color: transparent; 8 border: none; 9 font-size: 13px; 10 font-weight: bold; 11 color: #ddebf0; 12} 13 14#clip { 15 --color: #2761c3; 16 position: absolute; 17 top: 0; 18 overflow: hidden; 19 width: 100%; 20 height: 100%; 21 border: 5px double var(--color); 22 box-shadow: inset 0px 0px 15px #195480; 23 -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); 24} 25 26.arrow { 27 position: absolute; 28 transition: 0.2s; 29 background-color: #2761c3; 30 top: 35%; 31 width: 11%; 32 height: 30%; 33} 34 35#leftArrow { 36 left: -13.5%; 37 -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%); 38} 39 40#rightArrow { 41 -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%); 42 left: 102%; 43} 44 45button:hover #rightArrow { 46 background-color: #27c39f; 47 left: -15%; 48 animation: 0.6s ease-in-out both infinite alternate rightArrow8; 49} 50 51button:hover #leftArrow { 52 background-color: #27c39f; 53 left: 103%; 54 animation: 0.6s ease-in-out both infinite alternate leftArrow8; 55} 56 57.corner { 58 position: absolute; 59 width: 4em; 60 height: 4em; 61 background-color: #2761c3; 62 box-shadow: inset 1px 1px 8px #2781c3; 63 transform: scale(1) rotate(45deg); 64 transition: 0.2s; 65} 66 67#rightTop { 68 top: -1.98em; 69 left: 91%; 70} 71 72#leftTop { 73 top: -1.96em; 74 left: -3.0em; 75} 76 77#leftBottom { 78 top: 2.10em; 79 left: -2.15em; 80} 81 82#rightBottom { 83 top: 45%; 84 left: 88%; 85} 86 87button:hover #leftTop { 88 animation: 0.1s ease-in-out 0.05s both changeColor8, 89 0.2s linear 0.4s both lightEffect8; 90} 91 92button:hover #rightTop { 93 animation: 0.1s ease-in-out 0.15s both changeColor8, 94 0.2s linear 0.4s both lightEffect8; 95} 96 97button:hover #rightBottom { 98 animation: 0.1s ease-in-out 0.25s both changeColor8, 99 0.2s linear 0.4s both lightEffect8; 100} 101 102button:hover #leftBottom { 103 animation: 0.1s ease-in-out 0.35s both changeColor8, 104 0.2s linear 0.4s both lightEffect8; 105} 106 107button:hover .corner { 108 transform: scale(1.25) rotate(45deg); 109} 110 111button:hover #clip { 112 animation: 0.2s ease-in-out 0.55s both greenLight8; 113 --color: #27c39f; 114} 115 116@keyframes changeColor8 { 117 from { 118 background-color: #2781c3; 119 } 120 121 to { 122 background-color: #27c39f; 123 } 124} 125 126@keyframes lightEffect8 { 127 from { 128 box-shadow: 1px 1px 5px #27c39f; 129 } 130 131 to { 132 box-shadow: 0 0 2px #27c39f; 133 } 134} 135 136@keyframes greenLight8 { 137 from { 138 } 139 140 to { 141 box-shadow: inset 0px 0px 32px #27c39f; 142 } 143} 144 145@keyframes leftArrow8 { 146 from { 147 transform: translate(0px); 148 } 149 150 to { 151 transform: translateX(10px); 152 } 153} 154 155@keyframes rightArrow8 { 156 from { 157 transform: translate(0px); 158 } 159 160 to { 161 transform: translateX(-10px); 162 } 163} 164 165 166
15K views
15K views
Comments
1asurakuo 30. October at 16:32
30. October at 16:32
This is actually very cool
MIT License