[CSS] 노란 버튼, 말풍선 SVG 예제 자료

CSS에서 노란 버튼과 말풍선 안에 SVG를 사용한 예제 자료입니다.

<head>
  <style>
    .button {
      display: inline-block;
      background-color: yellow;
      color: #000;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 24px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .button::before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 1em;
      height: 1em;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V8C16 10.2091 14.2091 12 12 12H8L5.33333 15.3333L5.33333 12H4C1.79086 12 0 10.2091 0 8V4Z"/></svg>');
    }

    .button:hover {
      background-color: #ffcc00;
    }
  </style>
</head>
<body>
  <button class="button">안녕하세요, 범상입니다.</button>
</body>

댓글