#e8e8e8
1.btn { 2 width: 120px; 3 height: 40px; 4 border: none; 5 position: relative; 6 transition: .2s linear; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 letter-spacing: 2px; 11 text-transform: uppercase; 12} 13 14.btn > .icon { 15 display: none; 16 transition: .2s linear; 17} 18 19.btn, 20.socials { 21 border-radius: 20px; 22 filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.281)); 23} 24 25.socials { 26 display: flex; 27 list-style: none; 28 width: 120px; 29 height: 100%; 30 position: absolute; 31 top: 0; 32 left: 50%; 33 transform: translateX(-50%); 34 align-items: center; 35 justify-content: space-around; 36 transition: .2s linear; 37 opacity: 0; 38 visibility: hidden; 39} 40 41.btn:focus > span { 42 display: none; 43} 44 45.btn:focus > .icon { 46 display: flex; 47} 48 49.btn:focus { 50 width: 40px; 51} 52 53.btn:focus > .socials { 54 opacity: 1; 55 visibility: visible; 56 top: -120%; 57} 58 59
1.2K views
1.2K views
Comments
MIT License