how to create button using HTML and CSS

how to create button using HTML

- Follow us -

In this video,

I'll be showing you how to create a stylish button using HTML and CSS.

First,

let's take a look at the HTML code.

We have a simple button element with the text

'Button' inside.

Now

let's move on to the CSS code.

We set the margin and padding to 0 to remove any default spacing,
and use the box-sizing property to ensure that the button dimensions include any borders and padding.

For the body element,

we use flexbox to center the button both horizontally and vertically.


We also set a black background.

The button itself has a gradient background and no borders or outlines.We set the border-radius property to give it rounded corners, and the font-size and letter-spacing properties to adjust the text. We also use the cursor property to change the cursor to a pointer when hovering over the button.

Finally,

we use the

::before

pseudo-element to create a border around the button when it is hovered over.

This creates a nice visual effect that makes the button stand out.

GitHub link: