#212121
1button { 2 width: 10em; 3 position: relative; 4 height: 3.5em; 5 border: 3px ridge #149CEA; 6 outline: none; 7 background-color: transparent; 8 color: white; 9 transition: 1s; 10 border-radius: 0.3em; 11 font-size: 16px; 12 font-weight: bold; 13 cursor: pointer; 14} 15 16button::after { 17 content: ""; 18 position: absolute; 19 top: -10px; 20 left: 3%; 21 width: 95%; 22 height: 40%; 23 background-color: #212121; 24 transition: 0.5s; 25 transform-origin: center; 26} 27 28button::before { 29 content: ""; 30 transform-origin: center; 31 position: absolute; 32 top: 80%; 33 left: 3%; 34 width: 95%; 35 height: 40%; 36 background-color: #212121; 37 transition: 0.5s; 38} 39 40button:hover::before, button:hover::after { 41 transform: scale(0) 42} 43 44button:hover { 45 box-shadow: inset 0px 0px 25px #1479EA; 46}
17K views
17K views
Comments
3DeathRiderJr 14. October at 9:33
14. October at 9:33
It is just wow.
PBnJson 25. July at 4:58
25. July at 4:58
This is amazing.
Navarog21 25. July at 16:54
25. July at 16:54
@PBnJson Thanks !
Variations
1 MIT License