Button by JUJuanes200122
#e8e8e8
1ul { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6 margin: 0; 7 padding: 0; 8 display: flex; 9} 10ul li { 11 list-style: none; 12} 13ul li a { 14 display: block; 15 position: relative; 16 width: 100px; 17 height: 100px; 18 line-height: 100px; 19 font-size: 40px; 20 text-align: center; 21 text-decoration: none; 22 color: #404040; 23 margin: 0 30px; 24 transition: 0.5s; 25} 26ul li a span { 27 position: absolute; 28 transition: transform 0.5s; 29} 30ul li a span:nth-child(1), 31ul li a span:nth-child(3) { 32 width: 100%; 33 height: 3px; 34 background: #404040; 35} 36ul li a span:nth-child(1) { 37 top: 0; 38 left: 0; 39 transform-origin: right; 40} 41ul li a:hover span:nth-child(1) { 42 transform: scaleX(0); 43 transform-origin: left; 44 transition: transform 0.5s; 45} 46 47ul li a span:nth-child(3) { 48 bottom: 0; 49 left: 0; 50 transform-origin: left; 51} 52ul li a:hover span:nth-child(3) { 53 transform: scaleX(0); 54 transform-origin: right; 55 transition: transform 0.5s; 56} 57 58ul li a span:nth-child(2), 59ul li a span:nth-child(4) { 60 width: 3px; 61 height: 100%; 62 background: #404040; 63} 64ul li a span:nth-child(2) { 65 top: 0; 66 left: 0; 67 transform: scale(0); 68 transform-origin: bottom; 69} 70ul li a:hover span:nth-child(2) { 71 transform: scale(1); 72 transform-origin: top; 73 transition: transform 0.5s; 74} 75ul li a span:nth-child(4) { 76 top: 0; 77 right: 0; 78 transform: scale(0); 79 transform-origin: top; 80} 81ul li a:hover span:nth-child(4) { 82 transform: scale(1); 83 transform-origin: bottom; 84 transition: transform 0.5s; 85} 86 87.facebook:hover { 88 color: #25d366; 89} 90.facebook:hover span { 91 background: #25d366; 92} 93
153 views
Variation of abutton
Original Post
Variations
2 MIT License