Circle button with transitioned background on hover in CSS

2020-02-04

<style>
#circle-button-example button {
  display: inline grid;
  height: 5em;
  align-content: center;
  width: 5em;
  border-radius: 2.5em;
  border: 2px solid rgb(19, 144, 219);
  background-color: rgba(19, 144, 219, .0);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
  color: rgb(7, 114, 179);
  row-gap: 0.1em;
  font-weight: bold;
  cursor: pointer;
}
#circle-button-example button:hover {
  background-color: rgba(19, 144, 219, .07);
}
</style>
<div id="circle-button-example">
  <button>
    <span>📮</span>
    <span>Send</span>
  </button>
</div>