css在彼此旁边有两个按钮

时间:2016-05-12 07:36:43

标签: html css

我有一个css价格框,在框底部显示两个按钮。 但这些按钮看起来就像是一个。

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

我的风格

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

我有点被困在这里。我想在桌子底部放两个单独的按钮。以下是完整示例example price table wellness

enter image description here

4 个答案:

答案 0 :(得分:2)

您是否希望按钮完全独立,还有自己的动画?

如果是这样,你可能想要做这样的事情:

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

background-color移除div并将其添加到主播.button a

同时将display: inline-block;添加到.button a

&#13;
&#13;
.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;
}
&#13;
<div class="pricefooter">
  <div class="button">
    <a href="#2">Boek nu </a>
    <a href="#1">Info</a>
  </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

简化并清理您的代码:

你有2个按钮吗?为什么把2个链接放在同一个按钮上?我觉得这不是最好的做法。

按钮是一个html标签,所以将它设置为其他类的cate: http://www.w3schools.com/tags/tag_button.asp

以上所有看起来都正确,但我认为这个看起来更干净整洁

<强> 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/

答案 3 :(得分:0)

您好我可以看到您在按钮类上应用backgroundwidth css,您应将其更改为.button a

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