Procedure
Step 1 - Importing Fonts: First, We're bringing in a cool font from Google Fonts to add a touch of style: 'Open Sans.'
Step 2 - Body Styling: Make your webpage look sleek! Flex layout, a bit of margin adjustment, and a full-height setting (height: 100vh). And oh, we're using the clean 'Open Sans' font with a white background.
Step 3 - Button Container Styling: Let's center those buttons! Flexbox comes to the rescue again with display: flex; flex-wrap: wrap;, creating a neat wrapping effect.
Step 4 - Button Styling: Time for the star of the show – our buttons!
👉🏻 Button Padding: Padding defines the space inside the button between the content (text) and the button's border. In this, 0.375rem represents the top and bottom padding, and 0.75rem represents the left and right padding. Adjust these values to increase or decrease the spacing inside your buttons.
👉🏻 Button Background Colors and Hover Effects: Hover effects add a touch of interactivity when users mouse over the buttons. In this code, each button has its background color defined, and a different color is applied when hovering. Adjust the background-color property in the :hover state to change the color when users hover over a button.
👉🏻 Focus Styling: Buttons need attention too! When they are focused, a subtle shadow appears. It’s the little things that make your design stand out. Focus styling is crucial for accessibility and user experience. It gives a visual indication of which button is currently selected or in focus. In your code, a subtle box-shadow is added when a button is focused. This provides a visual cue that the button is focused. You can customize the box-shadow values to change the appearance.
Step 7 - Add Text Colors: Finally, create classes like .t-black and .t-white and pick the one that suits your taste.
Feel free to mix and match, change colors, and tweak sizes until your page feels just right. This is your canvas, and these styles are your paintbrushes. Happy coding! 🚀✨
