@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500&display=swap'); * { font-family: 'Sora', sans-serif; line-height: 1.5; font-weight: 400; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } span { display: block; } #app { position: relative; max-width: 1280px; margin: 0 auto; text-align: center; } .container { transform-origin: top left; width: 130px; height: 50px; overflow: hidden; display: flex; align-items: flex-start; flex-direction: column; border: 0px solid #c2cef9; background: #ffffff; border-radius: 30px; .save, .start { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; border: none; //background: #d9f5eb; background: transparent; width: 100%; height: 50px; flex-shrink: 0; padding-left: 20px; padding-right: 20px; border-radius: 20px; transition: background 0.3s; svg { width: 20px; flex-shrink: 0; } span { color: #051345; font-weight: bold; font-size: 16px; display: flex; align-items: center; gap: 0.5rem; } &-container { height: 24px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; } &:hover { background: #d9f5eb; animation: bounceX 0.3s ease 0s forwards; svg path { fill: #21ba7c; } span { color: #21ba7c; } } &.close { &:hover { background: #fecaca; animation: bounceX 0.3s ease 0s forwards; svg path { fill: #dc2626; } span { color: #dc2626; } } } } .save { width: fit-content; align-self: flex-end; margin-top: 1.25rem; } .middle { display: flex; align-items: center; justify-content: center; gap: 1rem; &-login { } } .input { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; margin-top: 1rem; padding-left: 10px; padding-right: 10px; label { display: block; color: #051345; } input { border: none; background: #f5f5f5; border-radius: 20px; padding-left: 20px; padding-right: 20px; height: 50px; width: 295px; font-size: 16px; color: #051345; transition: background 0.3s; &:focus { background: #f5f5f5; outline: none; animation: bounceX 0.3s ease 0s forwards; } } .otp { display: flex; align-items: center; justify-content: space-between; gap: 1rem; input { width: 30px; text-align: center; } } } } @keyframes bounceX { 0% { padding-left: 20px; } 50% { padding-left: 27px; } 100% { padding-left: 24px; } } .codebyln { display: block; margin-top: 20px; color: #051345; }

Login Button

Code

Stacks

X ( Twitter ) Post