How Would I Put These Buttons Side by Side and At the Center of my Page?-CodePudding

I'm new to HTML and CSS and I need help putting the two LinkedIn buttons side by side. They are vertically aligned right now but I don't know how to put them together side by side. I plan on adding a few more in the future, possibly 3 or 4 more but I am not yet sure. I've tried changing the display in the button to inline but this did not work for me.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  min-height: 100vh;
  background: #782F40;
  transition: 3s;
}

h1 {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.title {
  font-size: 130px;
  color: #FAF9F6;
  font-weight: 700;
}

.subtitle {
  color: white;
  font-size: 80px;
}

button {
  margin: 3px auto;
  display: block;
  background-color: transparent;
  color: #FAF9F6;
  width: 70px;
  height: 70px;
  border: 5px solid white;
  font-size: 25px;
  border-radius: 50px;
  transition: transform .6s;
  overflow: hidden;
}

button:hover {
  color: white;
  cursor: pointer;
  transform: scale(1.03);
}

#particles-js {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="expires" content="timestamp">
  <title>Name</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>


</head>

<body>


  <div >
    <div >
      <h1>
        <span >Name</span><br>
        <span >CS @ FSU</span>
      </h1>
    </div>
    <div >
      <form>
        <button type="submit" formaction="https://www.google.com/">
          <i >
        </i></button>
      </form>
      <form>

        <button type="submit" formaction="https://www.google.com/>
          <i ></i>
        </button>
      </form> 
    </div>
  </div>

<div id="particles-js "></div>    

<script type="text/javascript " src="particles.js "></script>
<script type="text/javascript " src="app.js "></script>
</body>
</html>

CodePudding user response：

Place them inside a container (div). The container can be display:flex or the buttons could have float:left. The flex is easier I guess.

Note: I made you a snippet because you had some issues in your HTML.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  min-height: 100vh;
  background: #782F40;
  transition: 3s;
}

h1 {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.title {
  font-size: 130px;
  color: #FAF9F6;
  font-weight: 700;
}

.subtitle {
  color: white;
  font-size: 80px;
}

button {
  margin: 3px auto;
  display: block;
  background-color: transparent;
  color: #FAF9F6;
  width: 70px;
  height: 70px;
  border: 5px solid white;
  font-size: 25px;
  border-radius: 50px;
  transition: transform .6s;
  overflow: hidden;
}

button:hover {
  color: white;
  cursor: pointer;
  transform: scale(1.03);
}

#particles-js {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.buttons-container {
  display: flex;
  margin: auto;
  width: 300px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="expires" content="timestamp">
  <title>Name</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>
</head>

<body>
  <div >
    <div >
      <h1>
        <span >Name</span><br>
        <span >CS @ FSU</span>
      </h1>
    </div>
    <div >
      <form>
        <div >
          <button type="submit" formaction="https://www.google.com/">
                        <i ></i>
                    </button>

          <button type="submit" formaction="https://www.google.com/">
                        <i ></i>
                    </button>
        </div>
      </form>
    </div>
  </div>

  <div id="particles-js"></div>

  <script type="text/javascript" src="particles.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>

</html>

CodePudding user response：

I'd use either flexbox or create /ul

For flexbox wrap them in a /div and in css set btn to display: flex;

CodePudding user response：

You can do this with using Bootstrap easily, but if you don't want to use it there are several different ways. I can give one of them. You can add this code on your style part.

div {
    display: flex;
}

This code affects all div's but you can use id or class for prevent this.