chromium/chrome/browser/resources/chromeos/emoji_picker/emoji_button.html

<style>
  :host {
    --emoji-background: transparent;
    /* Fixed height and width are required for buttons that have variants,
     * Otherwise, when showing variants, buttons' positions will be moved.
     */
    height: var(--emoji-size);
    position: relative;
    width:  var(--emoji-size);
  }

  #emoji-button {
    background: var(--emoji-background);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    font-family: 'Noto Color Emoji';
    font-size: 19px;
    height: 100%;
    line-height: var(--emoji-size);
    outline: none;
    padding: 0;
    text-align: center;
    user-select: none;
    width: 100%;
  }

  #emoji-button:focus,
  #emoji-button:active {
    outline-color: var(--emoji-picker-focus-ring-color);
    outline-style: solid;
    outline-width: 2px;
  }

  #emoji-button:disabled {
    /* chrome makes disabled buttons semitransparent.
     * we set a solid colour here to prevent that
     * (exactly which colour is not important).
     */
    color: red;
    cursor: default;
  }

  #emoji-button:hover {
    background-color: var(--emoji-hover-background);
  }

  /* Implement has-variants as ::after so that it still works with hover
   * ripple.
   */
  .has-variants::after {
    /* 4px grey triangle in bottom-right.
    * 315 degrees means starting at bottom-right towards top-left.
    * Manual color here because there isn't something easy to use, but fine for
    * dark mode since dark mode is the same.
    */
    background: linear-gradient(
        315deg, var(--google-grey-500) 4px,
        var(--emoji-background) 4px, var(--emoji-background));
    content: '';
    display: block;
    height: var(--emoji-size);
    position: relative;
    top: calc(0 - var(--emoji-size));
    width: var(--emoji-size);
  }

  #tooltip {
    --paper-tooltip-background: var(--cros-tooltip-background-color);
    --paper-tooltip-delay-in: var(--emoji-tooltip-delay-in);
    --paper-tooltip-delay-out: var(--emoji-tooltip-delay-out);
    --paper-tooltip-duration-in: 0;
    --paper-tooltip-duration-out: 0;
    --paper-tooltip-opacity: 1;
    --paper-tooltip-text-color: var(--cros-tooltip-label-color);
  }

  #tooltip::part(tooltip) {
    box-shadow: var(--cros-elevation-1-shadow);
    font: var(--cros-annotation-1-font);
    margin: 4px;
    padding: 4px 8px 4px 8px;
    white-space: nowrap;
  }
</style>

<button id="emoji-button" on-click="onClick"
    disabled="[[disabled]]" aria-label="[[getLabel()]]">
  [[emoji]]
</button>
<template is="dom-if" if="[[!variant]]">
  <paper-tooltip id="tooltip" for="emoji-button" fit-to-visible-bounds
      part="tooltip" offset="8">
    [[tooltip]]
  </paper-tooltip>
</template>