Roblox Style Buttons

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; margin: 0; font-family: 'Fredoka One', cursive; /* Apply bubbly font */ } .button-container { display: flex; gap: 20px; /* Space between buttons */ flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */ justify-content: center; padding: 20px; } .button { width: 200px; height: 80px; cursor: pointer; transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); /* Add a subtle shadow */ } .button:hover { transform: translateY(-3px) scale(1.03); /* Lift and slightly enlarge on hover */ filter: drop-shadow(0 6px 8px rgba(0,0,0,0.3)); /* Increase shadow on hover */ } .button:active { transform: translateY(1px) scale(0.98); /* Press down effect */ filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); } .button-bg { stroke: #333; /* Dark outline */ stroke-width: 3; } /* Primary Colors */ .button-bg.speed { fill: #FF4136; /* Red */ } .button-bg.health { fill: #FFDC00; /* Yellow */ } .button-bg.jump { fill: #0074D9; /* Blue */ } .button-text { font-family: 'Fredoka One', cursive; /* Ensure font is applied */ font-size: 24px; /* Adjust size as needed */ fill: white; /* White text */ text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Text shadow for readability */ user-select: none; /* Prevent text selection */ } // Optional: Add JavaScript for interactivity if needed later document.addEventListener('DOMContentLoaded', () => { const buttons = document.querySelectorAll('.button'); buttons.forEach(button => { button.addEventListener('click', () => { console.log(`${button.id} clicked!`); // Add specific actions for each button here // e.g., if (button.id === 'speed-button') { ... } }); }); });