CODEWITHSUNDEEP
jqueryhtmlcssbutton
renata costa
renata costa

Reputation: 177

CSS button with a number after content?

I want a button with a number, like this:

10 Like

Each time someone click on this like, the number will increse.

My problem is in css part. How can I do this? Should I use float:left or :after in CSS?

If use after, can I change this content:number in JS?

Here is my try:

<style>
.likebutton{
 width:100px;
 border:1px solid blue;
}
.likebutton:before{
 color: #FFFFFF;
 content: "1";
 background:blue;
}
</style>

<div class=likebutton>Like</div>

https://jsfiddle.net/v52aqo1s/

But the number is not in full height and I want to give move space in that number content width...

What is the best way to do this? float left or after? Can someone help me?

thank you!

Upvotes: 0

Views: 986

Answers (4)

conormcafee
conormcafee

Reputation: 61

You could do it like so: https://jsfiddle.net/v52aqo1s/2/

Just like @LinkinTED said, using display: inline-block.

You could use a data-attribute to hold the value of the likes, this would make it easier and keep your HTML & CSS nice and clean

.likebutton{
    width:100px;
    border:1px solid blue;
}
.likebutton:before{
    color: #FFFFFF;
    content: attr(data-likes);
    background:blue;
    display: inline-block;
    padding: 15px;
    margin-right: 15px;
}

Upvotes: 1

SW4
SW4

Reputation: 71170

Why not combine CSS and JS (e.g. jQuery)?

Given that the button label 'Like' is fixed, set the element pseudo to this value for content, this then allows you to use the actual element (accessible in JS) to set the value on interaction:

$('#like').on('click', function() {
  $(this).text(parseInt($(this).text()) + 1);
});
button {
  background: blue;
  color: white;
  border: 1px solid blue;
  padding: 0 0 0 4px;
}
button:after {
  content: 'Like';
  display: inline-block;
  background: white;
  color: black;
  padding: 0 4px;
  margin-left: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='like'>1</button>

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Add display: inline-block to the :before class.

Updated Fiddle.

Upvotes: 1

Jordan Davis
Jordan Davis

Reputation: 1520

Add margin and padding to the likebutton:before class.

Screenshot:

enter image description here

//CSS

.likebutton:before{
 color: #FFFFFF;
 content: "1";
 background:blue;
 padding: 0 10px;
 margin-right: 5px;
}

Upvotes: 0

Related Questions