How do I align these HREF Buttons?

Admin 1
Viewed 61

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: Currently

How I want it to look: enter image description here

So basically, I want it to move them both to the right side of the div and make them seperated.

css html
3 Answers

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>

user_21595280

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: enter image description here

user_121843710 

.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>

user_71446450
Related