Richard Richard - 6 months ago 26
HTML Question

css get two buttons next to eachother

I have a css price box with shows two buttons on the bottom of the box.
But those buttons looks like they are one.

<div class="pricefooter">
<div class="button">
<a href="#2">Boek nu </a>
<a href="#1">Info</a>
</div>
</div>


for the style I have this

.button{
width:50%;
height:50px;
margin:30px 10px;
padding-left: 30 px;
padding-right: 30 px;
background:#ff9547;
text-align:center;
cursor:pointer;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.button:hover{
width:60%;
}


.button a{
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
margin:10px 10px;
padding-left: 30 px;
padding-right: 30 px;
line-height:3;
}


I'm kind of stuck here. I want two separate buttons on bottom of the table. Here is the full example example price table wellness

enter image description here

Answer

Do you want the button to be totally separate, with their own animation too?

If so you probably want to do something like this:

.button a {
  background: #ff9547;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  margin: 2px;
  border: 1px solid #dd7325;
  padding: 15px 30px 15px 30px;
  line-height: 3;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button a:hover {
  padding: 15px 50px 15px 50px;
}
<div class="pricefooter">
  <div class="button">
    <a href="#3">Really long text example</a> 
    <a href="#2">Book now!</a> 
    <a href="#1">Info</a>
  </div>
</div>

Comments