Styling Buttons with HTML and CSS

Buttons are a fundamental component of web applications, serving as key call-to-action elements. To ensure your buttons attract users and prompt clicks, it's essential to make them visually appealing and distinct within your design. 

While HTML buttons come with default styles—including border, background color, text decoration, and color—you often need to customize these to achieve your desired look. Understanding how to override these default properties with CSS will enable you to design buttons that perfectly align with your design requirements.

<button>Click Me!</button>

Button States

1. Default
   The default state is what the button looks like when the page first loads.
2. Hover
   The hover state occurs when the user places the cursor over the button, providing visual feedback.
3. Active
   The active state is triggered when the user clicks on the button, indicating it is being pressed.
4. Focus
   The focus state is activated when the button is selected via keyboard navigation or other non-mouse actions.
5. Disabled
   The disabled state indicates that the button is not available for interaction, often graying it out or changing its opacity.

To start customizing your button, the first step is to override the default border.

button {
    border: none;
}

Then overwrite the outline in the focus state:

button:focus {
    outline: none;
}

Now we can add a cool style to it:

button {
    border: none;
    background-color: #01786a;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: bold;
}

button:focus {
    outline: none;
}

button:hover {
    box-shadow: 8px 5px 5px rgba(0, 0, 0, .2);
}

button:disabled {
    box-shadow: none;
    background-color: #7ce1d5;
}

Create a Laravel Project with Filament

Laravel is a PHP framework that makes the web development experience smoother and interesting.

Create a project

composer create-project laravel/laravel example-app

Run the project locally

cd example-app
 
php artisan serve

Add Filament to your Laravel application

composer require filament/filament:"^3.2" -W
 
php artisan filament:install --panels

Now install Filament Livewire components

php artisan filament:install --scaffold --widgets
 
npm install
 
npm run dev