<button class="button">
  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="icon"> 
  <rect width="20" height="20" />
  </svg>
  Кнопка
</button>
.button {
  padding: 0.5rem 1rem;
  line-height: 1.5;
  border: 1px solid teal;
  border-radius: 10000px;
  color: teal;
  background-color: white;
}

.icon {
  vertical-align: middle;
  margin-right: 0.25rem;
  fill: teal;
}

.button:hover {
  color: white;
  background-color: teal;
}

.button:hover .icon {
  fill: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.