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

July 30, 2022

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 class="container">
        <div class="header">
            <h1>
                <span class="title">Name</span><br>
                <span class="subtitle">CS @ FSU</span>
            </h1>
        </div>
        <div class="btn">
                <form>   
                <button type="submit" formaction="https://www.google.com/">
                        <i class="fa-brands fa-linkedin"></i></button></form>    
                        <form>   

                <button type="submit" formaction="https://www.google.com/>
                        <i class="fa-brands fa-linkedin"></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>

>Solution :

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 class="container">
    <div class="header">
      <h1>
        <span class="title">Name</span><br>
        <span class="subtitle">CS @ FSU</span>
      </h1>
    </div>
    <div class="btn">
      <form>
        <div class="buttons-container">
          <button type="submit" formaction="https://www.google.com/">
                        <i class="fa-brands fa-linkedin"></i>
                    </button>

          <button type="submit" formaction="https://www.google.com/">
                        <i class="fa-brands fa-linkedin"></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>