arr3
Reputation: 25
How do I align my buttons horizontally for my website?
I' m trying to align my buttons horizontally for my personal website. Any solutions of how I can do so? I'm a beginner but I can mostly understand HTML and CSS. Any help is appreciated.
<body>
<section class="seperator-wrapper">
<div class="seperator gradient">
</div>
</section>
<style>
body, html{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: Arial, Helvetica, sans-serif;
color: black;
image-rendering: pixelated;
scrollbar-width: none;
overflow: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
::-webkit-scrollbar {
display: none;
}
iframe {
width: 100vw;
height: 100vh;
border: none;
margin: 0;
padding: 0;
display: block;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
h2 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
h5 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
</style>
<h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
<h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
<br>
<button onclick="location.href = 'info.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Want to learn more?</button>
<br>
<button onclick="location.href = 'corrosion.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Use Corrosion</button>
<br>
<button onclick="location.href = 'mobydick.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Read Moby Dick</button>
<br>
<button onclick="location.href = 'hmrkey.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">HammerHead Key</button>
</body>
Upvotes: 1
Views: 57
Answers (3)
srinithi R
Reputation: 216
Place all the buttons inside a div tag and use wrapper class for that div. add display:flex; attribute to the wrapper class, and use margin attribute to the button elements to provide space between the buttons.
.wrapper{
display:flex;
}<body>
<section class="seperator-wrapper">
<div class="seperator gradient">
</div>
</section>
<style>
body, html{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: Arial, Helvetica, sans-serif;
color: black;
image-rendering: pixelated;
scrollbar-width: none;
overflow: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
::-webkit-scrollbar {
display: none;
}
iframe {
width: 100vw;
height: 100vh;
border: none;
margin: 0;
padding: 0;
display: block;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
h2 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
h5 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
</style>
<h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
<h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
<br>
<div class="wrapper">
<button onclick="location.href = 'info.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black;margin:0 8px;" class="border-button">Want to learn more?</button>
<br>
<button onclick="location.href = 'corrosion.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; margin:0 8px; color:black" class="border-button">Use Corrosion</button>
<br>
<button onclick="location.href = 'mobydick.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; margin:0 8px; color:black" class="border-button">Read Moby Dick</button>
<br>
<button onclick="location.href = 'hmrkey.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; margin:0 8px; color:black" class="border-button">HammerHead Key</button>
</div>
</body>Upvotes: 1
Nikhil Parmar
Reputation: 772
<body>
<section class="seperator-wrapper">
<div class="seperator gradient">
</div>
</section>
<style>
body, html{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: Arial, Helvetica, sans-serif;
color: black;
image-rendering: pixelated;
scrollbar-width: none;
overflow: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
::-webkit-scrollbar {
display: none;
}
iframe {
width: 100vw;
height: 100vh;
border: none;
margin: 0;
padding: 0;
display: block;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
h2 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
h5 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
.button-wrap {
width: 100%;
display: flex;
justify-content: space-around;
}
</style>
<h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
<h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
<br>
<div class="button-wrap">
<button onclick="location.href = 'info.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Want to learn more?</button>
<br>
<button onclick="location.href = 'corrosion.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Use Corrosion</button>
<br>
<button onclick="location.href = 'mobydick.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Read Moby Dick</button>
<br>
<button onclick="location.href = 'hmrkey.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">HammerHead Key</button>
</div>
</body>Upvotes: 2
Matheus Carvalho
Reputation: 26
You can wrap your button tags around a div and then add a display: flex for the div tag
<body>
<section class="seperator-wrapper">
<div class="seperator gradient">
</div>
</section>
<style>
body, html{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: Arial, Helvetica, sans-serif;
color: black;
image-rendering: pixelated;
scrollbar-width: none;
overflow: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
::-webkit-scrollbar {
display: none;
}
iframe {
width: 100vw;
height: 100vh;
border: none;
margin: 0;
padding: 0;
display: block;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
h2 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
h5 {
padding: 1em 2em;
margin: 0.25em 0.25em;
}
div {
display: flex;
}
</style>
<h2 style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
<h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
<br>
<div>
<button onclick="location.href = 'info.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Want to learn more?</button>
<br>
<button onclick="location.href = 'corrosion.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Use Corrosion</button>
<br>
<button onclick="location.href = 'mobydick.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Read Moby Dick</button>
<br>
<button onclick="location.href = 'hmrkey.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">HammerHead Key</button>
</div>
</body>You can also add margin for your button tags, so the buttons don't stay too close to each other.
Upvotes: 1
Related Questions
- Struggling with aligning buttons using CSS
- Unable to align buttons
- Aligning HTML Buttons Horizontally (Not Using CSS)
- Aligning buttons side by side
- Aligning buttons horizontally that are within divs
- How can I align my buttons so that they stay in the same line?
- How do I align these buttons?
- CSS: How to align buttons and text horizontally
- aligning the buttons in the div
- How to align horizontal buttons to the right?