How can I change the background color of a button when it's hovered over?

<!-- BEGIN COPY / PASTE -->
    <button class="my-button">Hover Me!</button>

    <style>
      .my-button {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
      }

      .my-button:hover {
        background-color: green;
      }
    </style>
    <!-- END COPY / PASTE -->