How to add some space for my button layout?-CodePudding

--How would I go about adding padding to the buttons?--The animations work but adding some space between them seems to be the issue-- I would still like all my buttons being on the same line but just spaced out a bit more--Still somewhat new at this so I appreciate the help--

button {
  min-width: 120px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: .1px;
  outline: none;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #f7f7f7;
  background-color: #9DDAC6;
  color: #000;
  transition: all 200ms ease-in-out;
}

button:hover {
  transform: scale(1.1);
  background-color: #f7f7f7;
  color: #a22274;
  font-weight: bold;
  box-shadow: 0 0 0 2px #a22274;
  letter-spacing: 1.1px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

button:active {
  transform: scale(1);
}

<p align="center">

  <button><a href="https://twitter.com/TheOnlyDecipher">Twitter page</a></button>

  <button> <a href="Contact.html">Contact Information</a></button>

  <button> <a href="points.html">Points of Interest</a></button>

  <button> <a href="Learning.html">Learning notes</a></button>

  <button> <a href="Beebs.html">Notes for Wife</a></button>


  <br><br>
</p>

CodePudding user response：

There are several ways you can do this, but probably the easiest is adding margin to the left and right. You may also want to style your button size with something more responsive for different size screens.

Just add this to your button style:

button {
min-width: 8em;
height: 2em;
font-size: 16;
cursor: pointer;
letter-spacing: .1px;
outline: none;
border: none;
border-radius: 6px;
box-shadow: 0 0 0 2px #f7f7f7;
background-color: #9DDAC6;
color: #000;
transition: all 200ms ease-in-out;
**margin: 0 2%;**
}

CodePudding user response：

These lines of code seem to be what I was looking for:

button {
  min-width: 120px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: .1px;
  outline: none;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #f7f7f7;
  background-color: #3EDBF0;
  color: #000;
  transition: all 200ms ease-in-out;
  margin: 0 5px;
}

button:hover {
  transform: scale(1.1);
  background-color: #f7f7f7;
  color: #a22274;
  font-weight: bold;
  box-shadow: 0 0 0 2px #a22274;
  letter-spacing: 1.1px;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

button:active {
  transform: scale(1);
}

<p align="center">
  <button><a href="https://twitter.com/TheOnlyDecipher">Twitter page</a></button>

  <button> <a href="Contact.html">Contact Information</a></button>

  <button> <a href="points.html">Points of Interest</a></button>

  <button> <a href="Learning.html">Learning notes</a></button>

  <button> <a href="Beebs.html">Notes for Wife</a></button>

  <button> <a href="Reference.html">Reference</a></button>

</p>