Place buttons side by side CSS

Asked

Viewed 52 times

1

Good evening, I had a question to put the buttons side by side. I put the inline-block too, but I could not solve.

.button {
  width: 10%;
  height: 50px;
  border: 0;
  cursor: pointer;
  background:#4169E1;
  border-radius: 20px;
  color: white;
  display: grid;
  align-items: center;
  justify-content: center;
}


.button:hover{
    background: #6495ED;
}
<div class="buttons">
        <a href="https://www.linkedin.com" target="blank" class="button" type="button">LinkedIn</a><br>
        <a href="mailto:[email protected]" target="blank" class="button" type="button">E-mail</a>
</div>

html css html5 css3 button

1 answer

1


In class buttons which is the class of div where have the <a></a> put a display:flex;

.button {
    width: 10%;
    height: 50px;
    border: 0;
    cursor: pointer;
    background:#4169E1;
    border-radius: 20px;
    color: white;
    display: grid;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  
  }

  .buttons a { 
    text-decoration: none;    
  }
  
  .buttons {
    display: flex;  
  }

  .button:hover{
      background: #6495ED;
  }
<div class="buttons">
   <a href="https://www.linkedin.com" target="blank" class="button" type="button">LinkedIn</a><br>
   <a href="mailto:[email protected]" target="blank" class="button" type="button">E-mail</a>
</div>

  • in the class Buttons which is the class of the div where you have the <a></a> put a display:flex;

Browser other questions tagged html css html5 css3 button

You are not signed in. Login or sign up in order to post.