Button by nkhlrjrs
#e8e8e8
1/* CSS code */ 2.schedule-button { 3 display: inline-flex; 4 align-items: center; 5 padding: 10px 20px; 6 background-color: #c49ff5; 7 color: #ffffff; 8 font-size: 16px; 9 text-decoration: none; 10 border-radius: 20px; 11 /* Rounded corners */ 12 transition: background-color 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 13 /* Smooth transitions */ 14 font-family: 'Poppins', sans-serif; 15 /* Change font to Poppins */ 16} 17 18.schedule-button:hover { 19 background-color: #6d21f2; 20 transform: translateX(-5px); 21 /* Move button to the left */ 22} 23 24.schedule-button .arrow { 25 display: none; 26 width: 20px; 27 height: 20px; 28 fill: #ffffff; 29 opacity: 0; 30 /* Initial opacity */ 31 transform: translateX(-20px) rotate(-45deg); 32 /* Initial position */ 33 transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 34 /* Smooth transitions */ 35} 36 37.schedule-button:hover .arrow { 38 display: inline-block; 39 opacity: 1; 40 /* Fade in on hover */ 41 animation: slide-in 0.4s forwards; 42} 43 44@keyframes slide-in { 45 from { 46 transform: translateX(-50px) rotate(-45deg); 47 opacity: 0.1; 48 /* Slightly visible */ 49 } 50 51 to { 52 transform: translateX(0) rotate(-45deg); 53 opacity: 1; 54 /* Fully visible */ 55 } 56} 57
411 views
411 views
MIT License