julekgwa julekgwa - 1 month ago 22
CSS Question

Creating like and dislike buttons in html and css

I'm creating these two like and dislike buttons.

enter image description here

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.
enter image description here

How can I display the circular
span
at the end like above? after setting the width to
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>
&nbsp;
<button class="social-dislike" >
<span class="dislike" >0</span>
<span class="like"><i class="glyphicon glyphicon-thumbs-down"></i></span>
</button>


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

example on fiddle

Answer

text-align

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

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

jsfiddle

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

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

jsfiddle