Bootstrap 3垂直堆叠的社交按钮

Question

我正在尝试在CSS / HTML中创建此按钮：

这就是我所拥有的：

有谁知道如何完美地创造这个？

这是我的代码

Profile.getDegreeList().then(function(data) {
    angular.forEach(data, function(ob) {
        if (keepGoing) {
            if (ob.degree == viewValue) {
                scope.id = ob.degree_id;
                keepGoing = false;
            }
        }
    });
    ngModel.$parsers.push(function(viewValue) {
        var keepGoing = true;
       return scope.id ;
    });
});

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;
	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;
	height: 100%;
    line-height: 50px;
	float:left;
	display: inline-block;
   }
   
   .btn-green span{
	margin:0;
	height: 100%;
    line-height: 50px;
	padding:0 10px;
	display: inline-block;
	font-size: 13px;
   }
  
</style>
<button class="btn btn-green">
  <i class="fa fa-instagram"></i>
  <span>Instagram</span>
</button>