Button by CaptainToy
This button was created for Button Mastery Vol. 2
#e8e8e8
1.send-message-button { 2 background: #fff; 3 border: 1px solid black; 4 border-radius: 10px; 5 padding: 15px 30px; 6 font-size: 18px; 7 font-weight: bold; 8 color: #333; 9 display: flex; 10 align-items: center; 11 gap: 10px; 12 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 13 cursor: pointer; 14 transition: transform 0.2s ease, box-shadow 0.2s ease; 15 position: relative; 16 overflow: hidden; 17} 18 19.send-message-button .icon { 20 font-size: 20px; 21 transition: transform 0.3s ease, opacity 0.3s ease; 22 position: relative; 23 left: 0; 24} 25 26.send-message-button .text { 27 transition: opacity 0.3s ease; 28} 29 30.send-message-button:hover .icon { 31 transform: translateX(200%); 32} 33 34.send-message-button:hover .text { 35 opacity: 0; 36} 37 38.send-message-button:hover { 39 transform: translateY(-2px); 40 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 41} 42 43.send-message-button::after { 44 position: absolute; 45 opacity: 0; 46 transition: opacity 0.3s ease; 47 top: 50%; 48 left: 50%; 49 transform: translate(-50%, -50%); 50 font-size: 18px; 51 font-weight: bold; 52} 53 54.send-message-button:hover::after { 55 opacity: 1; 56} 57 58.send-message-button::before { 59 content: ""; 60 position: absolute; 61 width: 300%; 62 height: 300%; 63 top: 50%; 64 left: 50%; 65 background: rgba(0, 0, 0, 0.05); 66 transition: all 0.3s ease; 67 border-radius: 50%; 68 transform: translate(-50%, -50%) scale(0); 69} 70 71.send-message-button:hover::before { 72 transform: translate(-50%, -50%) scale(1); 73} 74
44 views
44 views
MIT License