CODEWITHSUNDEEP
htmlcssbutton
Dexter Felice
Dexter Felice

Reputation: 11

How do I put these two cssmade buttons side to side?

The code is: https://codepen.io/morganwasbanned/pen/abBNxBQ the button is mainly made with css, so idk how to fix it. :// sorry

body {
  margin:0;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
  background-size: 600% 100%;
  animation: gradient 16s linear ;
  animation-direction: alternate;
}
@keyframes gradient {
  0% {background-position: 0%}
  100% {background-position: 100%}
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);

* {
  margin: 0px;
  padding: 0px
}

body {
  background:#2c3e50;
  font-size: 80%;
  font-family: 'Open Sans', sans-serif;
}

main {
  position: relative;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
}

main div {
  width: 200px;
  height: 100px;
  margin: -70px 0 0 -120px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
}

a {
   text-decoration:none;
   color:#fff;
}
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="welcome.css">
  </head>
  <body>
    <div class="wrapper"></div>
    <main class="wrapper">
      <div class="btn-group">
        <form method="get" action="https://www.google.com" target="_blank">
          <button class="button-three" id="button1">Home</button>
        </form>
        <form method="get" action="https://www.google.com" target="_blank">
          <button class="button-three" id="button2">Download</button>
        </form>
      </div>
    </main>
  </body>
</html>

Thank you

Upvotes: 0

Views: 180

Answers (3)

Emily
Emily

Reputation: 46

I put the buttons into a horizontal list and added display:inline; to the style of the form.

 <ul>
  <li>
    <form style="display:inline;" method="get" action="https://www.google.com" target="_blank">
      <button class="button-three" id="button1">Home</button>
    </form>
  </li>
  <li>
    <form style="display:inline;" method="get" action="https://www.google.com" target="_blank">
      <button class="button-three" id="button2">Download</button>
    </form>
  </li>
 </ul>

Upvotes: 2

MaxiGui
MaxiGui

Reputation: 6348

Basicaly the reason why the button are not next to each other it is because you are using form tag instead of a tag. So the default display is not the same:

  • form: display: block
  • a: display: inline

So by changing the default display of the form, your button should be next to each other.

But there is a second problem. It is very bad to use position: absolute to center element. You must do that if really you have no other option because it is not responsive is this case.

So I propose you a way using flex as below:

body {
  margin:0;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
  background-size: 600% 100%;
  animation: gradient 16s linear ;
  animation-direction: alternate;
}
@keyframes gradient {
  0% {background-position: 0%}
  100% {background-position: 100%}
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);

* {
  margin: 0px;
  padding: 0px
}

body {
  background:#2c3e50;
  font-size: 80%;
  font-family: 'Open Sans', sans-serif;
}

main {
  position: relative;   /* USELESS Because .wrapper is getting the priority */
  height: 200px;   /* USELESS Because .wrapper is getting the priority */
  width: 60%;   /* USELESS Because .wrapper is getting the priority */
  margin: 0 auto;
  padding: 20px;
  resize: both;
  display:flex;   /** ADDED **/
}

main div {
  /*width: 200px;
  height: 100px;
  margin: -70px 0 0 -120px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;*/
  display: flex;              /** ADDED **/
  height:100px;               /** ADDED **/
  justify-content: center;    /** ADDED **/
  margin: auto;               /** ADDED **/
}

main form{
  margin: auto 0;   /** ADDED **/
}

a {
   text-decoration:none;
   color:#fff;
}
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="welcome.css">
  </head>
  <body>
    <div class="wrapper"></div>
    <main class="wrapper">
      <div class="btn-group">
        <form method="get" action="https://www.google.com" target="_blank">
          <button class="button-three" id="button1">Home</button>
        </form>
        <form method="get" action="https://www.google.com" target="_blank">
          <button class="button-three" id="button2">Download</button>
        </form>
      </div>
    </main>
  </body>
</html>

Upvotes: 0

jWhiteside
jWhiteside

Reputation: 127

Flexbox is typically used to lay things out in a nice row. Try adding .btn-group { display: flex; flex-direction: row;} to your css file. This should make the buttons the same height, side by side.

Upvotes: 1

Related Questions