在html和css中创建喜欢和不喜欢按钮

我正在创建这两个喜欢和不喜欢按钮

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

当我将按钮的宽度设置为

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>

还有，我怎样才能使喜欢和不喜欢按钮具有可点击的效果

文本对齐

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

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

编辑
您可以选择任何类型的效果，这是它的目标css，更改

颜色

，

字体大小

或

边距

等

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

文本对齐

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

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

编辑
您可以选择任何类型的效果，这是它的目标css，更改

颜色

，

字体大小

或

边距

等

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

---

如果使用

如果使用

谢谢，我怎样才能给喜欢和不喜欢的图标添加可点击的效果？只给图标添加@julekgwaThanks，我怎样才能给喜欢和不喜欢的图标添加可点击的效果？只给图标添加@朱列克瓦