Creating a modern beautiful and responsive button

Muskan Bhandari — Sun, 23 Aug 2020 04:11:40 +0000

In this post , I'll show you how you can make responsive button for your websites using plain HTML and CSS. So let's get started.
Here the markup you need to follow this tutorial.

I've created a class "button-container" to
use the flexbox property.

And here's the CSS for the button:

The "cursor:pointer" changes the mouse cursor to pointer and the "font-size" and "height" are in rem unit just to make the button responsive.The "border:none" removes the annoying border and "border-radius:10px" makes the button edges circular (which is just nice).The "color" and "background-color" attribute are one's choice.
The "outline:none" removes the outline drawn around the button when it is clicked. The "box-shadow" property is to give the button some shadow.
And I've used some pseudo classes
The "filter:brightness(110%)" property increases the brightness of the button when we hover over it like it is changing the color.
The "transform:translate(0,0.3rem)" moves the button to the Y-direction

DEV Community: Muskan Bhandari

Creating a modern beautiful and responsive button