How to add button beside text?-CodePudding

I am trying to add a button beside the paragraph, but it does not work.

I wanted to put the button beside the paragraph with a big space in between them but I couldn't do it. I tried to put the contents inside a div and tried to do display : inline-block; but it didn't worked. Please help me. Here is my code.

/* Intro */

.intro__1 {
  margin: 0;
  display: inline;
}


/* Invite Button & Animation */

button.btn__1 {
  display: inline;
  white-space: nowrap;
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background: rgb(138, 138, 138);
  background: linear-gradient(90deg, rgba(138, 138, 138, 1) 4%, rgba(82, 82, 82, 1) 24%, rgb(80, 80, 80) 36%, rgb(148, 148, 148) 100%);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 1s;
  opacity: 1;
}

@keyframes button {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

button.btn__1:hover {
  opacity: 1;
  transform: translateY(10px);
}


/* Buttons & Animations // */


/* Info */

p.info__1 {
  display: inline;
  white-space: nowrap;
  font-family: 'Ubuntu', sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  color: rgb(145, 127, 127);
  margin-left: 150px;
}

<main>
  <center>
    <h1  style="font-size: 150px;margin-top: 250px;font-family: 'Courier New', Courier, monospace;">
      <div >E t c e t e r a</div>
    </h1>
  </center>
  <div >
    <p >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sagittis elit et vehicula. Fusce at semper urna. Etiam nulla metus, pharetra a bibendum ut, lobortis.
      <center><button ><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button></center>
  </div>
</main>

CodePudding user response：

<main>
  <center>
    <h1  style="font-size: 150px;margin-top: 250px;font-family: 'Courier New', Courier, monospace;">
      <div >E t c e t e r a</div>
    </h1>
  </center>
  <div >
    <p >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sagittis elit et vehicula. Fusce at semper urna. Etiam nulla metus, pharetra a bibendum ut, lobortis.
      <button ><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button>
  </div>
</main>

Remove <center> which wrap your <button>.

CodePudding user response：

Instead display:inline you can use display:flex. I remove the css property white-space: nowrap; for you p tag. The space between elements (p, button) you can change by css property gap in your intro__1 class.

/* Intro */

.intro__1 {
  margin: 0;
  display: flex;
  gap:150px;
}


/* Invite Button & Animation */

button.btn__1 {  
  white-space: nowrap;
  margin-left: auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background: rgb(138, 138, 138);
  background: linear-gradient(90deg, rgba(138, 138, 138, 1) 4%, rgba(82, 82, 82, 1) 24%, rgb(80, 80, 80) 36%, rgb(148, 148, 148) 100%);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 1s;
  opacity: 1;
}

@keyframes button {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

button.btn__1:hover {
  opacity: 1;
  transform: translateY(10px);
}


/* Buttons & Animations // */


/* Info */

p.info__1 {    
  font-family: 'Ubuntu', sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  color: rgb(145, 127, 127);
  margin-left: 150px;  
  
}

<main>
  <center>
    <h1  style="font-size: 150px;margin-top: 250px;font-family: 'Courier New', Courier, monospace;">
      <div >E t c e t e r a</div>
    </h1>
  </center>
  <div >
    <p >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sagittis elit et vehicula. Fusce at semper urna. Etiam nulla metus, pharetra a bibendum ut, lobortis.</p>
      <div>
          <button ><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button>
      </div>
  </div>
</main>