Button by KingHendrie
This button was created for Button Mastery Vol. 2
#e8e8e8
1.send-checkbox { 2 display: none; 3} 4 5.send-button { 6 display: inline-flex; 7 align-items: center; 8 justify-content: center; 9 padding: 10px 20px; 10 border: 2px solid #ddd; 11 border-radius: 15px; 12 background-color: #f9f9f9; 13 color: #2c2c2c; 14 font-family: Arial, sans-serif; 15 font-size: 16px; 16 font-weight: 500; 17 cursor: pointer; 18 box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), 19 2px 2px 5px rgba(0, 0, 0, 0.1); 20 transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s; 21 position: relative; 22 overflow: hidden; 23 white-space: nowrap; 24} 25 26.send-checkbox:checked + .send-button .message { 27 opacity: 0; 28} 29 30.send-checkbox:checked + .send-button .message-sent { 31 animation: fadeIn 3s forwards; 32} 33 34.send-checkbox:checked + .send-button svg { 35 animation: send 1s forwards; 36} 37 38@keyframes rotate-hover { 39 0% { 40 transform: rotate(0); 41 } 42 100% { 43 transform: rotate(40deg); 44 } 45} 46 47@keyframes send { 48 0% { 49 transform: translateX(0) rotate(40deg); 50 } 51 100% { 52 transform: translateX(150px) rotate(40deg); 53 } 54} 55 56@keyframes fadeIn { 57 0% { 58 opacity: 0; 59 } 60 100% { 61 opacity: 1; 62 } 63} 64 65.send-button .message-sent { 66 position: absolute; 67 top: 50%; 68 left: 50%; 69 transform: translate(-50%, -50%); 70 opacity: 0; 71 color: #125b96; 72} 73 74.send-button:hover { 75 background-color: #e0e0e0; 76 box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.1), 77 3px 3px 7px rgba(0, 0, 0, 0.15); 78 transform: translateY(-2px); 79} 80 81.send-button:hover svg { 82 animation: rotate-hover 0.2s; 83 transform: rotate(40deg); 84} 85
32 views
32 views
MIT License