Buttons with badges

Adding badges to buttons with CSS pseudo elements and HTML5 data attributes

HTML

<button data-count="5"></button>

CSS

button {
    background: linear-gradient(to bottom, rgba(37,130,188,1) 0%,rgba(41,137,216,1) 32%,rgba(41,137,216,1) 42%,rgba(175,224,234,1) 100%);
    width: 20px;
    height: 60px;
    border-radius: 10px;
    border: none;
    margin-top: 40px;
    margin-left: 40px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

button:before {
    content: attr(data-count);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: block;
    border-radius: 50%;
    background: rgb(67, 151, 232);
    border: 1px solid #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    color: #FFF;
    position: absolute;
    top: -7px;
    left: -7px;
}

button.badge-top-right:before {
    left: auto;
    right: -7px;
}

button.badge-bottom-right:before {
    left: auto;
    top: auto;
    right: -7px;
    bottom: -7px;
}

button.badge-bottom-left:before {
    top: auto;
    bottom: -7px;
}