css get two buttons next to eachother - html

Question

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">
Boek nu
Info
</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

Answer 1

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">
Really long text example
Book now!
Info
</div>
</div>

Answer 2

Remove the background-color from div and add it to the anchor .button a.
Also add display: inline-block; to the .button a.
.button {
width: 50%;
height: 50px;
margin: 30px 10px;
padding-left: 30 px;
padding-right: 30 px;
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: 30px;
padding-right: 30px;
line-height: 3;
background: #ff9547;
display: inline-block;
}
<div class="pricefooter">
<div class="button">
Boek nu
Info
</div>
</div>

Answer 3

simplify and clean your code:
you have 2 buttons right? why put 2 links in the same button?, I think it's not a best practice.
button is a html tag so style it instead crate other class:
http://www.w3schools.com/tags/tag_button.asp
all above looks right but I think this one looks more clean and organized
html:
<div class="pricefooter">
<button type="button" class='btn'>Click Me! </button>
<button type="button" class='btn'>Click Me! </button>
</div>
css:
button{
height:50px;
padding: 0 30px 0 30px;
background:#ff9547;
text-align:center;
cursor:pointer;
border: 0;
}
.btn a:hover{
padding: 15px 50px 15px 50px;
}
.btn a{
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
-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;
}
jsfiddle: https://jsfiddle.net/9e4j8xrn/2/

Answer 4

Hello As I can see you apply background and width css on button class you should be change it into the .button a
updating css:
.button {
cursor: pointer;
height: 50px;
margin: 30px 10px;
text-align: center;
}
.button a:hover {
padding: 10px 25px;
}
.button a {
background: #ff9547 none repeat scroll 0 0;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 3;
margin: 10px;
padding: 8px 20px;
text-decoration: none;
transition: all 0.4s ease-in-out 0s;
}