[英]Creating like and dislike buttons in html and css
I'm creating these two like and dislike buttons. 我正在创建这两个喜欢和不喜欢的按钮。
I'm having an issue when I set the width of the buttons to 48%
to make them fill up the containing div
, then they are displayed like the following. 当我将按钮的宽度设置为
48%
以使它们填满包含div
,我遇到了问题,然后它们显示如下。
How can I display the circular span
at the end like above? 如何在上面显示圆形
span
? after setting the width to 48%
. 将宽度设置为
48%
。
code for the buttons. 按钮的代码。
<button class="social-like" >
<span class="like"><i class="glyphicon glyphicon-thumbs-up"></i></span>
<span class="count" >0</span>
</button>
<button class="social-dislike" >
<span class="dislike" >0</span>
<span class="like"><i class="glyphicon glyphicon-thumbs-down"></i></span>
</button>
my css 我的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;
}
And also how can I make the like and dislike buttons to have a clickable effect? 而且我如何使喜欢和不喜欢的按钮具有可点击的效果?
text-align 文本对齐
.social-like {
border-top-left-radius: 5px;
text-align: right;
}
.social-dislike {
border-top-right-radius: 5px;
text-align: left;
}
EDIT 编辑
You can choose any type of effect you like, this is the target css for it, change the color
, font-size
or margin
ect... 你可以选择你喜欢的任何类型的效果,这是它的目标css,更改
color
, font-size
或margin
...
.like:focus,
.like:active,
.dislike:focus,
.dislike:active {
//effect goes here
}
You can do this if you use an <a>
tag instead of a <button>
. 如果使用
<a>
标签而不是<button>
则可以执行此操作。 It's not exactly what you asked for, but it might be an option if you cannot find a solution to this. 这不完全是你要求的,但如果你找不到解决方案,它可能是一个选择。
Here is a demo: https://jsfiddle.net/DTcHh/26213/ 这是一个演示: 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>
<a class="social-dislike" >
<span class="dislike" >10</span>
<span class="like"><i class="glyphicon glyphicon-thumbs-down"></i></span>
</a>
I added some classes to your demo: 我在你的演示中添加了一些类:
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.