css得到两个按钮旁边的海誓山盟

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

你想要的按钮是完全独立的，有自己的动画吗？

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

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

Answer 2

从div取出background-color并将其添加到锚.button a。

另外加display: inline-block;到.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>

Answer 3

简化和清理代码：

你有2个按钮吧？为什么把2个链接放在同一个按钮中？我认为这不是最佳做法。

按钮是一个HTML标记，以便风格的它，而不是箱子其他类：以上所有 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; 
}