Button by UpdatedAi
#212121
1.btn-53, 2.btn-53 *, 3.btn-53 :after, 4.btn-53 :before, 5.btn-53:after, 6.btn-53:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-53 { 12 -webkit-tap-highlight-color: transparent; 13 -webkit-appearance: none; 14 background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */ 15 backdrop-filter: blur(10px); /* Blur effect for glassmorphism */ 16 border: 1px solid rgba(255, 255, 255, 0.3); /* Light border for depth */ 17 box-shadow: 0 0 20px rgba(0, 195, 255, 0.7); /* Sun color glow */ 18 color: #fff; 19 cursor: pointer; 20 display: inline-block; 21 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 22 "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, 23 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 24 font-size: 100%; 25 font-weight: 900; 26 line-height: 1.5; 27 margin: 0; 28 padding: 1.2rem 3rem; 29 position: relative; 30 text-transform: uppercase; 31 border-radius: 999px; 32 overflow: hidden; 33} 34 35.btn-53 .original { 36 background: #000; 37 color: #fff; 38 display: grid; 39 place-content: center; 40 position: absolute; 41 inset: 0; 42 transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1); 43} 44 45.btn-53 .letters { 46 display: flex; 47 justify-content: center; 48 height: 100%; 49 position: relative; 50} 51 52.btn-53 span { 53 opacity: 0; 54 transition: opacity 0.2s, transform 0.2s cubic-bezier(0.87, 0, 0.13, 1); 55 transition-delay: 0.1s; 56} 57 58.btn-53:hover .original, 59.btn-53:hover span { 60 transform: translateY(100%); 61} 62 63.btn-53:hover .letters span { 64 opacity: 1; 65 transform: translateY(0); 66} 67 68/* Additional CSS for spinning "U" */ 69.btn-53 span:first-child { 70 display: inline-block; 71 transition: transform 0.5s ease-in-out; 72} 73 74.btn-53:hover span:first-child { 75 transform: rotate(360deg); /* Spin the "U" */ 76} 77 78/* Adjusting nth-child delays for sequential appearance */ 79.btn-53:hover span:nth-child(1) { 80 transition-delay: 0.1s; 81} 82.btn-53:hover span:nth-child(2) { 83 transition-delay: 0.2s; 84} 85.btn-53:hover span:nth-child(3) { 86 transition-delay: 0.3s; 87} 88.btn-53:hover span:nth-child(4) { 89 transition-delay: 0.4s; 90} 91.btn-53:hover span:nth-child(5) { 92 transition-delay: 0.5s; 93} 94.btn-53:hover span:nth-child(6) { 95 transition-delay: 0.6s; 96} 97.btn-53:hover span:nth-child(7) { 98 transition-delay: 0.7s; 99} 100.btn-53:hover span:nth-child(8) { 101 transition-delay: 0.8s; 102} 103.btn-53:hover span:nth-child(9) { 104 transition-delay: 0.9s; 105} 106
125 views
Variation of abutton
MIT License