<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;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Sans+Pro:400&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.