Button by HauNTH
#e8e8e8
1.social { 2 margin: 0; 3 list-style: none; 4 padding-left: 0; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 height: 100%; 9} 10 11.social .social-item { 12 margin: 0 30px; 13 width: 40px; 14 height: 40px; 15 display: flex; 16 justify-content: center; 17 align-items: center; 18} 19 20.social .social-item .social-link { 21 position: relative; 22 width: 100%; 23 height: 100%; 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 background: #fff; 28 text-align: center; 29 transform: perspective(1000px) rotate(-30deg) skew(25deg) 30 translate(0, 0); 31 transition: all 0.4s ease; 32} 33 34.social .social-item .social-link::before { 35 content: ""; 36 position: absolute; 37 top: 5px; 38 left: -10px; 39 height: 100%; 40 width: 10px; 41 background: #b1b1b1; 42 transition: all 0.4s ease; 43 transform: rotate(0deg) skewY(-45deg); 44} 45 46.social .social-item .social-link::after { 47 content: ""; 48 position: absolute; 49 top: 40px; 50 left: -5px; 51 height: 10px; 52 width: 100%; 53 background: #b1b1b1; 54 transition: all 0.4s ease; 55 transform: rotate(0deg) skewX(-45deg); 56} 57 58.social .social-item .social-link:hover { 59 transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px); 60 box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5); 61} 62 63.social .social-item:nth-child(1) a { 64 color: #3b5999; 65} 66 67.social .social-item:nth-child(1):hover a { 68 background: #3b5999; 69} 70 71.social .social-item:nth-child(1):hover a::before { 72 background: #3b5999; 73} 74 75.social .social-item:nth-child(1):hover a::after { 76 background: #3b5999; 77} 78 79.social .social-item:nth-child(2) a { 80 color: #55acee; 81} 82 83.social .social-item:nth-child(2):hover a { 84 background: #55acee; 85} 86 87.social .social-item:nth-child(2):hover a::before { 88 background: #55acee; 89} 90 91.social .social-item:nth-child(2):hover a::after { 92 background: #55acee; 93} 94 95.social .social-item:nth-child(3) a { 96 color: #dd4b39; 97} 98 99.social .social-item:nth-child(3):hover a { 100 background: #dd4b39; 101} 102 103.social .social-item:nth-child(3):hover a::before { 104 background: #dd4b39; 105} 106 107.social .social-item:nth-child(3):hover a::after { 108 background: #dd4b39; 109} 110 111.social .social-item:nth-child(4) a { 112 color: #e4405f; 113} 114 115.social .social-item:nth-child(4):hover a { 116 background: #e4405f; 117} 118 119.social .social-item:nth-child(4):hover a::before { 120 background: #e4405f; 121} 122 123.social .social-item:nth-child(4):hover a::after { 124 background: #e4405f; 125} 126 127.social .social-item .social-link:hover { 128 color: #ffffff; 129} 130 131
1.3K views
1.3K views
MIT License