CSS - Another iOS style notification badge

by katalin_2003

HTML

<button href="#">Button <span>100</span></button>

CSS

body {
    background: #EEE;
    margin: 30px;
}
button {
    position: relative;
    padding: 20px 10px;
    font:bold 36px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    border-radius: 10px;
}
span {
    position: absolute;
    top:-15px;
    right: -30px;
    padding: 3px 9px;
    /*    border: 2px solid white;*/
    border: 0;
    border-radius:9999px;
    /*    background: -webkit-linear-gradient(top, #FF6969 0%,#ff0000 100%);*/
    background-color: #F80000;
/*    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .4), 0 0 1px rgba(0, 0, 0, .7) inset, 0 10px 0px rgba(255, 255, 255, .11) inset;*/
    -webkit-background-clip: padding-box;
    font:bold 16px/20px"Helvetica Neue", sans-serif;
    color: white;
    text-decoration: none;
/*    text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);*/
}