CODEWITHSUNDEEP
htmlcss
Richard de Ree
Richard de Ree

Reputation: 2540

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

Upvotes: 0

Views: 2135

Answers (4)

Rahul
Rahul

Reputation: 229

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;
}

Upvotes: 0

raduken
raduken

Reputation: 2119

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'><a href="#2">Click Me!</a> </button>
    <button type="button"  class='btn'><a href="#2">Click Me!</a> </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/

Upvotes: 0

Andrew Bone
Andrew Bone

Reputation: 7291

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>

Upvotes: 2

Pugazh
Pugazh

Reputation: 9561

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">
    <a href="#2">Boek nu </a>
    <a href="#1">Info</a>
  </div>
</div>

Upvotes: 1

Related Questions