CSS mask を使ってアイコンを表示

2025年12月30日
blog
css

デモ

サンプルボタン

コード

.square-button {
  appearance: none;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: .5em 1em;
  color: #fff;
  background-color: #116;
  font-size: 1rem;
  text-decoration: none;
  border: 0 none;
  cursor: pointer;

  &::after {
    --icon-width: 2em;
    content: '';
    flex-shrink: 0;
    aspect-ratio: 1;
    display: block;
    width: var(--icon-width);
    background-color: currentColor;
    mask-image: var(--mask-image);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }

  &.mod--external {
    &::after {
      --icon-width: 1em;
      --mask-image: url('data:image/svg+xml;charset=utf8,\
        %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E\
        %3Cpath d=%22M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z%22/%3E\
        %3C/svg%3E');
    }
  }

  &.mod--forward {
    &::after {
      --mask-image: url('data:image/svg+xml;charset=utf8,\
        %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E\
        %3Cpath d=%22M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z%22/%3E\
        %3C/svg%3E');
    }
  }
}
«