<button class="Button">
<span class="Button-inner">
Example
</span>
<span class="Badge">
4 <span class="u-hiddenVisually">Unread Messages</span>
</span>
</button>
/**
* Outer Button styles
*/
.Button {
background: transparent;
border: 0;
border-radius: 0;
color: inherit;
display: inline-block;
font: inherit;
height: auto;
line-height: 1;
margin: 0;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
}
/**
* Override default focus styles so we can apply our own.
* Never do this unless you will replace them!!
*/
.Button:focus {
outline: none;
}
.Button::-moz-focus-inner {
border: 0;
}
.Button-inner {
align-items: center;
background: #456BD9;
border: 2px solid transparent;
border-radius: 99em;
color: #fff;
display: flex;
font-weight: 600;
height: 2.5em;
min-width: 2.5em;
padding: 0 1em;
position: relative;
transition: 0.2s ease;
width: 100%;
}
.Button:focus .Button-inner {
border-color: #fff;
box-shadow: 0 0 0 2px #456BD9;
}
.Button:hover .Button-inner {
filter: brightness(1.1);
}
.Button:active .Button-inner {
filter: brightness(0.9);
}
/**
* Demo styles
*/
* {
box-sizing: border-box;
margin: 0;
}
html {
background: #DBE5EA;
height: 100%;
}
body {
align-items: center;
display: flex;
font: 1.125em/1.5625 Source Sans Pro, Tahoma, Helvetica Neue, Helvetica, Arial, sans-serif;
justify-content: center;
margin: 0;
padding: 1em;
min-height: 100%;
}
.Badge {
align-items: center;
background: #ce2c6c;
border: 2px solid #fff;
border-radius: 99em;
color: #fff;
display: flex;
font-size: 0.77em;
font-weight: 400;
height: 1.44em;
justify-content: center;
line-height: 1;
min-width: 1.44em;
position: absolute;
right: -2px;
top: -2px;
}
/**
* @see https://github.com/suitcss/utils-display
*/
.u-hiddenVisually {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
This Pen doesn't use any external JavaScript resources.