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