How do I align these HREF Buttons? - html

Question

I am trying to make 2 button align (they are HREFs) on the right side of a div. I have tried many stuff but I am not sure how.
CSS:
.href-right-header-buttons {
position: unset;
color: #fff;
font-size: 26px;
letter-spacing: 2px;
padding-top: 34px;
padding-bottom: 34px;
padding-left: 6px;
padding-right: 6px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
right: 0;
top: 0;
animation: animheader;
animation-duration: 1.5s;
.div-header-gradient {
display: flex;
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
flex-direction: row;
}
HTML:
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white" style="z-index: 1000;">
Axxon
</p>
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
<a href="#" class="href-right-header-buttons">
More Information
</a>
</div>
How this looks now:
How I want it to look:
So basically, I want it to move them both to the right side of the div and make them seperated.

Answer 1

Add an extra wrapper (I used the div in the HTML with the class "my-wrapper"):
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white">
Axxon
</p>
<div class="my-wrapper">
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
<a href="#" class="href-right-header-buttons">
More Information
</a>
</div>
</div>
And in the CSS, I have added align-items center (to center the X-axis) and justify-content: space-between to create the space between those two elements (the paragraph and my new div with the class wrapper):
.div-header-gradient {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
flex-direction: row;
}
You can check in this codepen: https://codepen.io/GiulioBadger/pen/XWjBwxr
Preview of the result:

Answer 2

Look for flex-grow and apply it on the p.
To make it work from your codePen CSS, I removed the justify-content: space-between on the flex container .div-header-gradient and the absolute positionnings of its child elements.
About the "ripple" effect on the links, I wrapped them with a div (one for each) to "contain" the animation. There is an additionnal CSS rule for them And it affected the position calculation in the JS. Notice the .closest("div") which targets that wrapper div.
let x = e.pageX - e.target.closest("div").offsetLeft;
let y = e.pageY - e.target.closest("div").offsetTop;
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body {
display: flex;
flex-direction: column;
background-color: #141414;
position: center;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #121212;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.button {
position: relative;
padding: 12px 36px;
margin: 10px 0;
color: #738adb;
font-size: 26px;
letter-spacing: 2px;
border-radius: 100px;
background: #242424;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
.div-header-gradient {
display: flex;
align-items: center;
/*justify-content: space-between;*/
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
/*flex-direction: row;*/
}
.div-header-gradient p{
flex-grow: 1; /* Add this for the alignement */
}
.div-header-gradient>div{ /* Add this to contain the ripple effect on links */
position: relative;
overflow: hidden;
height: 100%;
display: flex;
align-content: center;
}
span {
position: absolute;
background: #fff;
transform: translate(-50%, -50%);
pointer-events: none;
border-radius: 50%;
pointer-events: none;
animation: ripple 0.6s linear;
z-index: 9999;
overflow: hidden;
}
.text-header-title-white {
color: #fff;
font-size: 70px;
font-family: Roboto, sans-serif;
margin: 1px;
/*position: absolute;*/
vertical-align: central;
overflow: hidden;
margin-left: 0.5%;
display: flex;
flex-direction: row;
}
.href-right-header-buttons {
/*position: absolute;*/
color: #fff;
font-size: 26px;
letter-spacing: 2px;
padding-top: 34px;
padding-bottom: 34px;
padding-left: 6px;
padding-right: 6px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
/*right: 0;
top: 0;*/
animation: animheader;
animation-duration: 1.5s;
}
#keyframes animheader {
from {
margin-top: -100px;
opacity: 0;
}
to {
margin: 0px;
opacity: 1;
}
}
#keyframes ripple {
0% {
width: 0px;
height: 0px;
opacity: 0.2;
}
100% {
width: 400px;
height: 400px;
opacity: 0;
}
}
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white">
Axxon
</p>
<div> <!-- a div to wrap each link -->
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
</div>
<div> <!-- a div to wrap each link -->
<a href="#" class="href-right-header-buttons">
More Information
</a>
</div>
</div>
<script type="text/javascript">
const buttons = document.querySelectorAll('a');
buttons.forEach(btn => {
btn.addEventListener('mousedown', function(e) {
let x = e.pageX - e.target.closest("div").offsetLeft; // Changed
let y = e.pageY - e.target.closest("div").offsetTop; // Changed
let ripples = document.createElement('span');
ripples.style.left = x + 'px';
ripples.style.top = y + 'px';
this.appendChild(ripples);
setTimeout(() => {
ripples.remove()
}, 5000);
})
})
</script>
<script src="assets/js/particles.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>

Answer 3

.href-right-header-buttons {
position: unset;
color: #fff;
font-size: 26px;
letter-spacing: 2px;
padding-top: 34px;
padding-bottom: 34px;
padding-left: 6px;
padding-right: 6px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
right: 0;
top: 0;
animation: animheader;
animation-duration: 1.5s;
}
.div-header-gradient {
display: flex;
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
flex-direction: row;
justify-content: space-between;
}
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white" style="z-index: 1000;">
Axxon
</p>
<span class="left">
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
<a href="#" class="href-right-header-buttons">
More Information
</a>
</span>
</div>