Button by mRcOol7
#212121
1.LinkedinBtn { 2 width: 45px; 3 height: 45px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 border: none; 8 background-color: transparent; 9 position: relative; 10 border-radius: 7px; 11 cursor: pointer; 12 transition: all 0.3s; 13} 14 15.LinkedinBtn .svgContainer { 16 width: 100%; 17 height: 100%; 18 display: flex; 19 align-items: center; 20 justify-content: center; 21 background-color: transparent; 22 backdrop-filter: blur(4px); 23 letter-spacing: 1px; /* Adjusted letter spacing */ 24 border-radius: 10px; 25 transition: all 0.3s; 26 border: 1px solid rgba(156, 156, 156, 0.466); 27} 28 29.LinkedinBtn .BG { 30 position: absolute; 31 content: ""; 32 width: 100%; 33 height: 100%; 34 background: #0077b5; 35 z-index: -1; 36 border-radius: 9px; 37 pointer-events: none; 38 transition: all 0.3s; 39} 40 41.LinkedinBtn:hover { 42 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Added box shadow effect */ 43} 44 45.LinkedinBtn:hover .BG { 46 transform: rotate(35deg); 47 transform-origin: bottom; 48} 49 50.LinkedinBtn:hover .svgContainer { 51 background-color: rgba(156, 156, 156, 0.466); 52} 53
380 views
Variation of abutton
MIT License