#212121
1.button { 2 background-color: #1877F2; 3 border: none; 4 border-radius: 50%; 5 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); 6 animation: sway 2s infinite alternate; 7 width: 70px; 8 height: 70px; 9 display: flex; 10 justify-content: center; 11 align-items: center; 12 perspective: 500px; 13 transition: transform 0.5s, box-shadow 0.5s; 14} 15 16.button:hover { 17 transform: rotate(-360deg); 18 box-shadow: 0 0 20px 0 rgba(0, 0, 255, 0.5); 19} 20 21@keyframes grow { 22 0% { 23 transform: scale(1); 24 } 25 26 100% { 27 transform: scale(10); 28 } 29} 30 31@keyframes glow { 32 0% { 33 text-shadow: gold 1px 1px 1px; 34 } 35 36 100% { 37 text-shadow: gold 0 0 10px gold; 38 } 39} 40 41.icon { 42 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); 43 transition: transform 0.5s; 44} 45 46.icon:hover { 47 transform: scale(1.5); 48 filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.9)) 49} 50 51.follow-text { 52 color: white; 53 position: relative; 54 top: 3em; 55 left: -4em; 56 transition: transform 0.5s; 57} 58 59.follow-text:hover { 60 transform: scale(1.2); 61 color: rgba(31,81,255,100); 62 filter: drop-shadow(2px 2px 4px rgba(31,81,255,2.0)) 63} 64
219 views
219 views
Comments
Variations
2 MIT License