Back

Beautiful hover save button - How it's done

Tutorial on how to create a beautiful animation save (download) button using only CSS.

HTML

For HTML, we have a button with specific classes, containing a span with text and an SVG icon.

        <button class="save-btn">
          <span class="save-text">SAVE</span>
          <svg class="save-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
          </svg>
        </button>

CSS

For CSS, first we'll style the button with the save-btn class. First, I'll set transition and cursor to pointer, align items inside using flexbox and add some paddings. Then I'm setting background color to light blue, removing the default border, setting it slightly rounded and adding a little shadow. I'll set the width to 120 pixels, font to bold and font size to 16 pixels.

        .save-btn {
          transition: 0.2s;
          cursor: pointer;
          display: flex;
          align-items: center;
          padding: 5px 10px;
          background-color: rgb(176, 206, 255);
          border: none;
          box-shadow: 0 0 5px #999;
          border-radius: 3px;
          width: 120px;
          font-weight: 600;
          font-size: 16px;
        }

For the text inside the button, first I'll set transition and the width to 100 percent and right border, which divides it from the icon. I'll set the height to 40 pixels and align text in the center using flexbox.

        .save-text {
          transition: 0.2s;
          width: 100%;
          border-right: 1px solid rgb(77, 98, 131);
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

For the icon, I'll just add transition and left padding.

        .save-icon {
          transition: 0.2s;
          padding-left: 10px;
        }

On hover, I'll change the button's background color to neon green and set transition.

        .save-btn:hover {
          transition: 0.2s;
          background-color: rgb(0, 255, 102);
        }

On button hover, I'll set text width to zero and hide everything that overflows, so that text disappears on hover. Also, I'll add a little transition so that the disappearing is smooth. Lastly, I'll set the border property to none.

        .save-btn:hover .save-text {
          width: 0%;
          transition: 0.2s;
          border: none;
          overflow: hidden;
        }

On button hover, I'll set the svg to 100 percent width and remove the left padding. Also, don't forget the transition.

        .save-btn:hover .save-icon {
          transition: 0.2s;
          width: 100%;
          padding-left: 0;
        }

And that's it. ☺️

Whole code

<button class="save-btn">
  <span class="save-text">SAVE</span>
  <svg class="save-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
  </svg>
</button>

<style>
.save-btn {
  transition: 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: rgb(176, 206, 255);
  border: none;
  box-shadow: 0 0 5px #999;
  border-radius: 3px;
  width: 120px;
  font-weight: 600;
  font-size: 16px;
}
.save-text {
  transition: 0.2s;
  width: 100%;
  border-right: 1px solid rgb(77, 98, 131);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.save-icon {
  transition: 0.2s;
  padding-left: 10px;
}
.save-btn:hover {
  transition: 0.2s;
  background-color: rgb(0, 255, 102);
}
.save-btn:hover .save-text {
  width: 0%;
  transition: 0.2s;
  border: none;
  overflow: hidden;
}
.save-btn:hover .save-icon {
  transition: 0.2s;
  width: 100%;
  padding-left: 0;
}

</style>

Beautiful hover save button - How it's done

HTML

CSS

Whole code

Comments

More buttons

Similar

See also