In this post, we will place two buttons side by side with HTML and CSS. One of the scenarios is when we want to put save and cancel buttons in the form.
Output
In the above output, you see how we placed two buttons side by side using HTML and CSS.
HTML Code
<div class="container">
<button class="btn">Save</button>
<button class="btn">Cancel</button>
</div>In the above HTML code, we have written a container with two buttons with the name save and cancel. We are going to align these buttons in a single row.
CSS Code
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
html,
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "DM Sans", sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fdf4ef;
}
.container {
display: flex;
gap: 10px;
}
.btn {
font-size: 12px;
padding: 4px 12px;
border-radius: 4px;
color: #fff;
background-color: #663a1f;
border: 1px solid #663a1f;
}
.btn:hover {
color: #663a1f;
background-color: #fff;
}In the above CSS code, we are setting the display property of the container to flex, so that buttons are aligned in a single row. And we are styling the buttons and container.
Using the above HTML and CSS code, we are arranging the button side by side.
Also, Check this