How to make a button in HTML CSS

Make a button with HTML & CSS: learn how with a simple example!

Creating a Button with HTML and CSS

Creating a button with HTML and CSS is a relatively simple process. To get started, you'll need to create a <div> element and assign it an id or a class. This will be used to refer to the button in your CSS code.

<div id="myButton">Click Me</div>

Next, style the button with CSS. In this example, we'll use the #myButton id selector to reference our button. The CSS code below will create a basic blue button.

#myButton {
    border: 1px solid #006ebd;
    background-color: #006ebd;
    padding: 10px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

Now, to add some interactivity to the button we can use the :hover pseudo class. This will allow us to change the styling of the button when the user hovers over it.

#myButton:hover {
    background-color: #0080ff;
    border: 1px solid #0080ff;
}

Finally, we can add a little JavaScript code to make the button do something. In this example, we'll use the onclick event to call a JavaScript function when the button is clicked.

<div id="myButton" onclick="myFunction()">Click Me</div>

And that's it! You've created a button with HTML and CSS that is both visually appealing and interactive.