Jak zrobić przyciski w tej samej linii + taki sam długośc przycisku nie zależnie od długości tekstu?

Question

Ktoś coś poradzi? 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
  <img src="https://picsum.photos/500/500/?random=1" alt="Snow">
  <div class="buttons">
    <button class="btn"><a href="">PRZYCISK</a></button>

    <button class="btn"><a href="">PRZYSICK XXX</a></button>
  </div>
</div>
 

 

 

 

CSS

 

.container {
  position: relative;
  width: 100%;
}
 
/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}
 
/* Style the button and place it in the middle of the container/image */
.container .buttons {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
   
 

}
 
.container .btn:hover {
  background-color: black;
  color: white;
}

.container .buttons .btn a {
  text-decoration: none;
  
}
.btn { 
  display:inline-block;
  background-color: #000;
  color: black;
font-size: 3vw;
padding: 0.5em 3em;
  border: 1px outset white;
        padding: 4px 
  cursor: pointer;

}

 

Comments

Sformatuj pytanie, kod umieść w odpowiednim bloku : regulamin 2.E

Answer 1

Ustaw np. w css-ie width dla przycisków w ten sam sposób co font-size.

 

<div class="container">
  <img src="https://picsum.photos/500/500/?random=1" alt="Snow">
  <div class="buttons">
    <button class="btn"><a href="https://www.twoj-link.pl">Button</a></button>
    <button class="btn"><a href="https://www.twoj-link.pl">Button xxx</a></button>
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}
    
/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}
    
/* Style the button and place it in the middle of the container/image */
.container .buttons {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
    
.container .btn:hover {
  background-color: black; /* rgba(0,0,0,1) */
}
.container .btn:hover > a {
  color: white;
}   
.container .buttons .btn a {
  display: block;
  text-decoration: none;
  width: 100%; /* żeby link <a href=""> obejmował cały button */
  height: 100%;
}
.btn { 
  display: inline-block;
  background-color: rgba(0,0,0,0.6);
  font-size: 3vw;
  padding: 0.5em 3em;
  border: 1px outset white;
  padding: 4px; 
  cursor: pointer;
  width: 20vw; /* TUTAJ */
  transition: all 0.7s; /* płynna zmiana kolorów gdy .container .btn:hover */
}