Button by deamelo
#e8e8e8
1.main { 2 display: flex; 3 flex-direction: column; 4 gap: 0.5em; 5} 6 7.up { 8 display: flex; 9 flex-direction: row; 10 gap: 0.5em; 11} 12 13.down { 14 display: flex; 15 flex-direction: row; 16 gap: 0.5em; 17} 18 19.card1 { 20 width: 90px; 21 height: 90px; 22 outline: none; 23 border: none; 24 background: white; 25 border-radius: 90px 5px 5px 5px; 26 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, 27 rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 28 transition: 0.2s ease-in-out; 29} 30 31.whatsapp { 32 margin-top: 1.5em; 33 margin-left: 1.2em; 34 fill: #00ff00; 35} 36 37.card2 { 38 width: 90px; 39 height: 90px; 40 outline: none; 41 border: none; 42 background: white; 43 border-radius: 5px 90px 5px 5px; 44 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, 45 rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 46 transition: 0.2s ease-in-out; 47} 48 49.linkedin { 50 margin-top: 1.5em; 51 margin-left: -0.9em; 52 fill: #0077b5; 53} 54 55.card3 { 56 width: 90px; 57 height: 90px; 58 outline: none; 59 border: none; 60 background: white; 61 border-radius: 5px 5px 5px 90px; 62 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, 63 rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 64 transition: 0.2s ease-in-out; 65} 66 67.github { 68 margin-top: -0.6em; 69 margin-left: 1.2em; 70} 71 72.card4 { 73 width: 90px; 74 height: 90px; 75 outline: none; 76 border: none; 77 background: white; 78 border-radius: 5px 5px 90px 5px; 79 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, 80 rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 81 transition: 0.2s ease-in-out; 82} 83 84.discord { 85 margin-top: -0.9em; 86 margin-left: -1.2em; 87 fill: #8c9eff; 88} 89 90.card1:hover { 91 cursor: pointer; 92 scale: 1.1; 93 background-color: #00ff00; 94} 95 96.card1:hover .whatsapp { 97 fill: white; 98} 99 100.card2:hover { 101 cursor: pointer; 102 scale: 1.1; 103 background-color: #0077b5; 104} 105 106.card2:hover .linkedin { 107 fill: white; 108} 109 110.card3:hover { 111 cursor: pointer; 112 scale: 1.1; 113 background-color: black; 114} 115 116.card3:hover .github { 117 fill: white; 118} 119 120.card4:hover { 121 cursor: pointer; 122 scale: 1.1; 123 background-color: #8c9eff; 124} 125 126.card4:hover .discord { 127 fill: white; 128} 129
589 views
Variation of abutton
MIT License