Button CSS: Create different button styles for a website

In this article, you’ll see how to style a button using CSS.

Do you want to create a unique button style for your website that enhances your site’s design and makes your buttons stand out?

Right

So, here I’ll show you some unique and beautiful button styles for your website. I’m sure these buttons will help you on your website to get a higher Clickthrough rate (CTR).

When building a website, an ordinary button can often be overlooked. However, buttons are a critical part of user interaction.

Whether it’s a call-to-action (CTA), a form submission, or a link to the landing page, buttons need to stand out and fit the overall design of your site.

Here, we’ll explore how to create different button styles using CSS to make your website more engaging and user-friendly.

Let’s get started it:

1. Grow button CSS

To create a button, you can use HTML and CSS. Here’s an example of how you can create a button using HTML:

HTML:

<button class="grow-button">Grow Button</button>

You can further customize the appearance of the button using CSS. Here’s how you can style a button using CSS:

CSS:

/* Grow button CSS */
.grow-button {
    background-color: gray;
    color: white;
    border: 1px solid gray;
    border-radius: 2px;
    padding: 10px 15px;
    margin-bottom: 25px;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    transition: all 0.3s ease-in-out;
}

.grow-button:hover {
    background-color: green;
    color: white;
    border: 1px solid green;
    transform: scale(1.1);
}

Result:

Grow Button

[Back to Top ↑]

2. Fill button CSS

HTML:

<button class="fill-button">Fill Button</button>

CSS:

/* Fill button CSS */
.fill-button {
    background: white;
    color: black;
    border: 1px solid black;
    border-radius: 2px;
    padding: 10px 15px;
    margin-bottom: 25px;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    transition: all 0.3s ease-in-out;
}

.fill-button:hover {
    background: green;
    color: white;
    border: 1px solid green;
}

Result:

Fill Button

[Back to Top ↑]

3. Shrink button

HTML:

<button class="shrink-button">Shrink Button</button>

CSS:

/* Shrink button CSS */
.shrink-button {
    background: gray;
    color: white;
    border: 1px solid gray;
    border-radius: 2px;
    padding: 10px 15px;
    margin-bottom: 25px;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    transition: all 0.3s ease-in-out;
}

.shrink-button:hover {
    background: green;
    color: white;
    border: 1px solid green;
    transform: scale(0.9);
}

Result:

Shrink Button

[Back to Top ↑]

4. Slide down button CSS

HTML:

<button class="slide-down-button">Slide down Button</button>

CSS:

/* Slide down button CSS */
.slide-down-button {
    background: transparent;
    color: black;
    border: 2px solid gray;
    border-radius: 2px;
    padding: 12px 15px;
    margin-bottom: 25px;
    cursor: pointer;
    display: inline-block;
    box-shadow: inset 0 0 0 0 black;
    transition: all 0.3s ease-in-out;
}

.slide-down-button:hover {
    box-shadow: inset 0 100px 0 0 black;
    color: white;
    border: 2px solid black;
}

Result:

Slide down Button

[Back to Top ↑]

5. Slide right button

HTML:

<button class="slide-right-button">Slide right Button</button>

CSS:

/* Slide right button CSS */
.slide-right-button {
    background: transparent;
    color: black;
    border: 2px solid gray;
    border-radius: 2px;
    padding: 12px 15px;
    margin-bottom: 25px;
    cursor: pointer;
    display: inline-block;
    box-shadow: inset 0 0 0 0 black;
    transition: all 0.3s ease-in-out;
}

.slide-right-button:hover {
    box-shadow: inset 400px 0 0 0 black;
    color: white;
    border: 2px solid black;
}

Result:

Slide right Button

To slide the button inside, add this line for hover:

.slide-inside-button:hover {
    box-shadow: inset 0 0 0 50px black;
}

Also don’t forget to make changes in the button class.

[Back to Top ↑]

6. Gradient button (lift on hover)

HTML:

<button class="gradient-button">Gradient Button</button>

CSS:

/* Gradient button CSS */
.gradient-button {
    background: rgb(19,130,222);
    background: linear-gradient(135deg, rgba(19,130,222,1) 0%, rgba(25,166,169,1) 50%);
    color: white;
    border-radius: 2px;
    padding: 12px 15px;
    margin-bottom: 25px;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    transition: all 0.3s ease-in-out;
}

.gradient-button:hover {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.5);
    transform: translatey(-5px);
}

Result:

Gradient Button

To make the background gradient, use the CSS Gradient tool for better results.

[Back to Top ↑]

How to create a button using GenerateBlocks

For this site, I’m using the GeneratePress theme and the GenerateBlocks plugin to design this website.

Get GeneratePress

Here is a detailed review of why GeneratePress is the perfect theme for your website. And to design your website efficiently, read about the GenerateBlocks WordPress plugin.

Get GenerateBlocks

Now let’s see, how you can design a button using the GenerateBlocks plugin.

1. Install GenerateBlocks: Go to the WordPress dashboard, Plugins > Add New Plugin, search for GenerateBlocks, then install and activate.
2. Go to page or post: Now go to any page or post where you want to add a button.
3. Add button: Click the + icon and add a GenerateBlocks button.

Now customize your button settings like padding, bottom margin, border, color, etc.

Or, create a button and add a link, then apply any above CSS class like gradient-button into the button settings Advanced > Additional CSS class(es) tab and save changes.

Finally, go to the WordPress dashboard, Appearance > Customize > Additional CSS tab and paste the all CSS code of the gradient button.

Save changes, now your beautiful button is ready.

[Back to Top ↑]

Why customize website buttons?

Customizing website buttons is an important aspect of web design that can significantly enhance the user experience and increase conversions.

Here are some key reasons:

• Well-designed buttons can clearly state their purpose, reducing user confusion and making navigation easier.
• Custom buttons that match the website’s overall design and color scheme enhance the user experience.
• Custom buttons can incorporate brand colors, fonts, and styles, strengthening brand identity and making the website instantly recognizable.
• Buttons can be made larger or more prominent to accommodate users with different needs, improving overall accessibility.
• Attractive and well-placed buttons can encourage users to interact more with the site, increasing engagement and time spent on the page.

[Back to Top ↑]

Conclusion

CSS offers endless possibilities, from basic buttons to gradients, shadows, and animated buttons.

You can create various button styles to match your website’s design with these examples.

Experiment with different styles and properties to find what best suits the design and functionality of your site.

Just play with the code!

In all the above examples you can change any property like background, text color, border, or hover effect.

Let me know in the comment box if you’re thinking of any specific button design, and we’ll create it together.

If you liked this, please share.