main.css
unknown
css
2 months ago
1.7 kB
4
Indexable
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ffe5e5; } .container { display: flex; flex-direction: column; text-align: center; align-items: center; gap: 20px; max-width: 500px; margin: 20px; } .container .tenor-gif-embed { max-width: 200px; } .container .btn { display: flex; gap: 25px; } .btn a { text-decoration: none; color: #111; background: #fff; padding: 10px 25px; border-radius: 8px; box-shadow: 0.5rem 1rem 3rem hsl(0, 0%, 0%, 0.3); font-weight: bold; font-size: 16px; transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; display: inline-block; text-align: center; border: 2px solid transparent; } .btn a:hover { background: #111; color: #fff; transform: scale(1.05); border: 2px solid #fff; } .btn a:active { transform: scale(0.98); box-shadow: 0.3rem 0.6rem 2rem hsl(0, 0%, 0%, 0.2); } #newButton { display: none; /* Initially hidden */ top: 100px; left: 100px; } /* Heart Animation */ .heart { position: absolute; font-size: 42px; color: red; animation: heart-animation 1s ease-out; opacity: 0; transform: scale(0); } @keyframes heart-animation { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1.5); } 100% { transform: scale(1); opacity: 0; } }
Editor is loading...
Leave a Comment