chromium/chrome/browser/resources/lens/overlay/translate_button.html

<style>
  #arrowRightIcon {
    background-color: rgba(255, 237, 235, 0.6);
    display: block;
    height: 18px;
    margin-block-start: 16px;
    margin-block-end: 16px;
    mask-image: url('arrow_right.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 18px;
  }

  .button {
    border: none;
    padding: 0;
  }

  .button-label {
    color: var(--color-overlay-button-label);
    font-family: inherit;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
  }

  .language-picker-button {
    background-color: rgba(var(--color-scrim-rgb), 1);
    border-radius: 100px;
    height: 34px;
    gap: 0px;
    margin-block-start: 8px;
    margin-block-end: 8px;
    min-width: 77px;
  }

  .language-picker-menu-button {
    border-radius: 0;
    color: var(--color-scrim);
  }

  .language-picker-label {
    margin-block-start: 6px;
    margin-block-end: 6px;
    margin-inline-end: 16px;
  }

  .language-picker-menu {
    background: var(--color-selection-element);
    border-radius: 8px;
    /* Needed to prevent mouse flicker on option hover. */
    cursor: default;
    display: none;
    margin-top: 55px;
    max-height: 400px;
    overflow: auto;
    padding: 8px 0px;
    pointer-events: all;
    position: absolute;
  }

  .menu-item {
    align-items: center;
    display: flex;
    height: 36px;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  #languagePicker {
    background-color: rgba(var(--color-scrim-rgb), 0.6);
    border-radius: 100px;
    display: flex;
    gap: 4px;
    height: 50px;
    margin-inline-start: 9px;
    pointer-events: all;
  }

  #sourceLanguageButton {
    gap: 6px;
    margin-inline-start: 8px;
  }

  :host(:not([should-show-stars-icon])) #sourceLanguageButton {
    gap: 0px;
  }

  :host(:not([should-show-stars-icon])) #sourceLanguageLabel {
    margin-inline-start: 16px;
  }

  #starsIcon {
    background-color: var(--color-overlay-icon);
    display: block;
    height: 16px;
    margin-block-start: 9px;
    margin-block-end: 9px;
    margin-inline-start: 12px;
    mask-image: url('stars.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 16px;
  }

  #targetLanguageButton {
    margin-inline-end: 8px;
  }

  #targetLanguageLabel {
    margin-inline-start: 16px;
  }

  #translateButton {
    background-color: rgba(var(--color-scrim-rgb), 0.6);
    border-radius: 48px;
    height: 50px;
    min-width: 50px;
    pointer-events: all;
    width: 117px;
  }

  :host([is-translate-mode-enabled]) #translateButton {
    background-color: var(--color-primary);
    gap: 0px;
    width: 50px;
  }

  #translateButtonLabel {
    line-height: 50px;
  }

  #translateContainer {
    display: flex;
    flex-direction: row;
  }

  #translateIcon {
    background-color: var(--color-overlay-icon);
    display: block;
    height: 24px;
    mask-image: url('translate.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 24px;
  }

  :host([is-translate-mode-enabled]) #translateButtonLabel,
  :host(:not([is-translate-mode-enabled])) #languagePicker,
  :host(:not([should-show-stars-icon])) #starsIcon {
    display: none;
  }

  :host([target-language-menu-visible]) #targetLanguagePickerMenu,
  :host([source-language-menu-visible]) #sourceLanguagePickerMenu {
    display: flex;
    flex-direction: column;
  }
</style>
<div id="translateContainer">
  <cr-button id="translateButton" class="button"
    on-click="onTranslateButtonClick">
    <span id="translateIcon" slot="prefix-icon"></span>
    <span id="translateButtonLabel" class="button-label">$i18n{translate}</span>
  </cr-button>
  <div id="languagePicker">
    <cr-button id="sourceLanguageButton" class="button language-picker-button"
      on-click="onSourceLanguageButtonClick">
      <span id="starsIcon" slot="prefix-icon"></span>
      <span id="sourceLanguageLabel"
        class="button-label language-picker-label">
        [[getSourceLanguageDisplayName(sourceLanguage)]]
      </span>
    </cr-button>
    <div id="sourceLanguagePickerMenu" class="language-picker-menu" role="menu"
      aria-labelledby="sourceLanguageButton">
      <cr-button id="sourceAutoDetectButton"
        class="button language-picker-menu-button"
        on-click="onAutoDetectMenuItemClick">
        <span class="menu-item">$i18n{autoDetect}</span>
      </cr-button>
      <template id="sourceLanguagePickerContainer" is="dom-repeat"
        items="[[translateLanguageList]]" as="language">
        <cr-button class="button language-picker-menu-button"
          on-click="onSourceLanguageMenuItemClick">
          <span class="menu-item">[[language.displayName]]</span>
        </cr-button>
      </template>
    </div>
    <span id="arrowRightIcon"></span>
    <cr-button id="targetLanguageButton" class="button language-picker-button"
      on-click="onTargetLanguageButtonClick">
      <span id="targetLanguageLabel" class="button-label language-picker-label">
        [[targetLanguage.displayName]]
      </span>
    </cr-button>
    <div id="targetLanguagePickerMenu" class="language-picker-menu" role="menu"
      aria-labelledby="targetLanguageButton">
      <template id="targetLanguagePickerContainer" is="dom-repeat"
        items="[[translateLanguageList]]" as="language">
        <cr-button class="button language-picker-menu-button"
          on-click="onTargetLanguageMenuItemClick">
          <span class="menu-item">[[language.displayName]]</span>
        </cr-button>
      </template>
    </div>
  </div>
</div>