DEV Community

Cover image for How to make stylish buttons with CSS only.

How to make stylish buttons with CSS only.

Mahmoud Ibrahiam
Full stack web developer
・2 min read

We all need to style beautiful buttons to attract user's eyes, so I will help you to know the right way to style your own buttons with CSS only, let's start.

Button Width

At first, we need to control the width of the button, and for that, I prefer to use padding to control the button width I follow a simple method, the y-axis is 1/6 of the x-axis, look at the next example to see what I mean.

Buttons with border radius

To make your border-radius more beautiful, you can set the value of the y-axis of your button, look at the example below I used the 0.5 value from the y-axis in padding and in border-radius also.

Buttons with full border radius

To make the buttons with a full border radius, you can set the value to 9999px.

Solid Buttons

To make solid buttons you need to remove the border and the border-radius, then you can add background and text color to get a solid button like the button in the following example.

Outline Buttons

To make outline buttons you need to set the background value to transparent and a border value as you prefer.

All Buttons

Here we have reached the end of this article, I hope you liked it, leave you to look at all button styles.

The color in these examples was picked by the Darker tool.

Thanks for reading.

Discussion (0)

Forem Open with the Forem app