引導3個垂直堆疊的社交按鈕

Question

我試圖創建CSS/HTML按鈕：

以下是我有：

有誰知道我可以完美地創造這個？

這裏是我的代碼

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<style> 
 
    .btn { 
 
    padding: 14px 24px; 
 
    border: 0 none; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    } 
 
    .btn:focus, 
 
    .btn:active:focus { 
 
    outline: 0 none; 
 
    } 
 
    .btn-primary { 
 
    background: #d5e14d; 
 
    color: #fff; 
 
    border-radius: 0; 
 
    } 
 
    .btn-primary:hover { 
 
    background: #d5e14d; 
 
    } 
 
</style> 
 
<button class="btn btn-primary"><i class="fa fa-instagram"></i> Instagram</button>

Answer 1

你可以做這樣的事情。爲特定的按鈕創建自己的css類是一種很好的做法。在這裏，我創建了類.btn-green，而不是像所做的所有更改都看起來像您的示例。請看下圖：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
<style> 
 
    .btn { 
 
    padding:0; 
 
    height: 50px; 
 
\t line-height: 50px; 
 
    border: 0 none; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    } 
 
    .btn:focus, 
 
    .btn:active:focus { 
 
    outline: 0 none; 
 
    } 
 
    .btn-green { 
 
    background: #d5e14d; 
 
    color: #fff; 
 
    border-radius: 0; 
 
    } 
 
    .btn-green:hover { 
 
    background: #d5e14d; 
 
    } 
 
    
 
    .btn-green i { 
 
    margin: 0; 
 
    border-right: 1px solid #C6D157; 
 
    padding:0 15px; 
 
    font-size: 25px; 
 
\t height: 100%; 
 
    line-height: 50px; 
 
\t float:left; 
 
\t display: inline-block; 
 
    } 
 
    
 
    .btn-green span{ 
 
\t margin:0; 
 
\t height: 100%; 
 
    line-height: 50px; 
 
\t padding:0 10px; 
 
\t display: inline-block; 
 
\t font-size: 13px; 
 
    } 
 
    
 
</style> 
 
<button class="btn btn-green"> 
 
    <i class="fa fa-instagram"></i> 
 
    <span>Instagram</span> 
 
</button>