引导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>