CSS Button

Basic Button Styling:

Being able to pull down and add a button is the first step.

                          
                            button {
                                padding: 10px 20px;
                                font-size: 16px;
                                background-color: #3498db;
                                color: #fff;
                                border: none;
                                border-radius: 5px;
                                cursor: pointer;
                            }

Here, padding, font kind, font-size, background-color, text-color, border, border-radius, and cursor is used to create a button with a simple look.


Button Hover Effect:

You can adds a hover effect to the button.

                          
                            button:hover {
                                background-color: #2980b9;
                            }

On hover, the button fades its background color to reveal the other button and renders the call to action.


Button Active State:

Specifies what exact style of the button should be shown when it is pushed.

                          
                            button:active {
                                background-color: #1f618d;
                            }

This chaning background gay when the button is pushed.


Disabled Button:

Styles a disabled button.

                          
                            button:disabled {
                                background-color: #bdc3c7;
                                color: #7f8c8d;
                                cursor: not-allowed;
                            }

The color for a disabled button's code is a characteristic of accessibility. It consists of a different background color, text color, and a "not-allowed" cursor.


Button with Icon:

Includes an icon in the button.

                          
                            button {
                                padding: 10px 20px;
                                font-size: 16px;
                                background-color: #2ecc71;
                                color: #fff;
                                border: none;
                                border-radius: 5px;
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                            }
                            
                            button i {
                                margin-right: 5px;
                            }

'This code uses different flex options to put icon and text horizontally together and align them.'


Button with Gradient:

Applies a gradient background to the button.

                          
                            button {
                                padding: 10px 20px;
                                font-size: 16px;
                                background: linear-gradient(to right, #3498db, #2ecc71);
                                color: #fff;
                                border: none;
                                border-radius: 5px;
                                cursor: pointer;
                            }

This creates a button with a gradient background from blue to green.