在html和css中創建喜歡和不喜歡的按鈕

Question

我正在創建這兩個喜歡和不喜歡的按鈕。

當我將按鈕的寬度設置為48%以使它們填滿包含div ，我遇到了問題，然后它們顯示如下。

如何在上面顯示圓形span ？ 將寬度設置為48% 。

按鈕的代碼。

 <button class="social-like" >
     <span class="like"><i class="glyphicon glyphicon-thumbs-up"></i></span>
     <span class="count" >0</span>
 </button>
    &nbsp;
 <button class="social-dislike" >
     <span class="dislike" >0</span>
     <span class="like"><i class="glyphicon glyphicon-thumbs-down"></i></span>
</button>

我的css

.social-like, .social-dislike {
    border: none;
    outline: none;
    font-size: 16px;
    /*width: 48%;*/
    background-color: #03A9F4;
    color: #fff;
}

.social-like {
    border-top-left-radius: 5px;
}

.social-dislike {
    border-top-right-radius: 5px;
}

.count, .like, .dislike {
    padding:10px;
}

.count, .dislike {
    background-color: #03A9F4;
    border-radius: 50%;
    font-size:12px;
}

.dislike {
    margin-left: -13px;
}

.count {
    margin-right: -10px;
}

而且我如何使喜歡和不喜歡的按鈕具有可點擊的效果？

小提琴上的例子

Answer 1

文本對齊

.social-like {
  border-top-left-radius: 5px;
    text-align: right;
}

.social-dislike {
  border-top-right-radius: 5px;
    text-align: left;
}

的jsfiddle

編輯
你可以選擇你喜歡的任何類型的效果，這是它的目標css，更改color ， font-size或margin ...

.like:focus,
.like:active,
.dislike:focus,
.dislike:active {
    //effect goes here
}

的jsfiddle

Answer 2

如果使用<a>標簽而不是<button>則可以執行此操作。 這不完全是你要求的，但如果你找不到解決方案，它可能是一個選擇。

這是一個演示： https ： //jsfiddle.net/DTcHh/26213/

<a class="social-like" >
                    <span class="like"><i class="glyphicon glyphicon-thumbs-up"></i></span>
                    <span class="count" >15</span>
                </a>
                &nbsp;
                <a class="social-dislike" >
                    <span class="dislike" >10</span>
                    <span class="like"><i class="glyphicon glyphicon-thumbs-down"></i></span>
                </a>

我在你的演示中添加了一些類：

.social-like:hover, .social-dislike:hover {
  text-decoration:none;
  color:white;
}

.social-like:active, .social-dislike:active {
  background-color: #3299CD;
}

.social-like:active .count, .social-dislike:active .dislike {
  background-color: #3299CD;
}