#e8e8e8
1.button { 2 width: 45px; 3 height: 45px; 4 background-color: #3b5998; 5 border: none; 6 border-radius: 50%; 7 position: relative; 8 z-index: 1; 9 overflow: hidden; 10 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.185), 11 0px 3px 3px rgba(255, 255, 255, 0.178) inset, 12 0px -3px 3px rgba(0, 0, 0, 0.281) inset; 13 transition: all .3s; 14 display: flex; 15 align-items: center; 16 justify-content: center; 17 cursor: pointer; 18 padding-bottom: 3px; 19} 20 21.button::before { 22 background-color: transparent; 23 content: "f"; 24 font-size: 1.6em; 25 font-weight: 700; 26 color: white; 27 z-index: 5; 28 transition: all .3s; 29 font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 30} 31 32.button::after { 33 content: "acebook"; 34 background-color: transparent; 35 font-size: 0; 36 opacity: 0; 37 font-weight: 700; 38 color: white; 39 z-index: 5; 40 transition: all .3s; 41 transform: translateX(60px); 42 font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 43} 44 45.button:hover { 46 width: 160px; 47 border-radius: 30px; 48} 49 50.button:hover::after { 51 opacity: 1; 52 font-size: 1.6em; 53 transform: translateX(0px); 54} 55 56.button:hover .shine { 57 transform: translate(-70px ,10px); 58}
665 views
665 views
Comments
MIT License