Question

我有一个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

Answer 1

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

如果是这样，你可能想要做这样的事情：

＆＃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;

Answer 2

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

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

＆＃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;

Answer 3

简化并清理您的代码：

你有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/

Answer 4

您好我可以看到您在按钮类上应用background和width 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;
}

css在彼此旁边有两个按钮

4 个答案: