Recreating Netlify's Neat-o Sliding Button Effect

The download button on Netlify's official website is simple and elegant, attracting the eye without being abrupt, and its interactive effect is particularly impressive: when the mouse hovers, the button expands and displays the words "Download". I noticed a slight difference in display under Safari, which sparked my interest in exploring how it was implemented. So I tried reproducing the effect and optimized the spacing.

Its core technology lies in four aspects:

• Use the left attribute to control the display and hiding of the "Download" tag.
• Use the padding property in the hovering state of the button to make room for the "Download" tag.
• declare scale(1, 1) when the button is hovered, ensuring that the content remains intact while moving.
• Use the transition attribute to animate padding , background background-position position and transform attributes of the button to achieve smooth animation effects.

Here is a code example that does not include styles to show its principle more clearly:

If it is difficult to understand how it works, the following image shows how the "Download" tag is hidden from the button through overflow: hidden , and how it can be pushed into view when the mouse hovers.

Hide it by setting a negative left value for the icon and the "Download" label, and reset it to a positive value when the entire button is hovered.

 /* Default status*/
.button {
    background: 
      #f6bc00 
      url(data:image/svg xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

/* Hover status*/
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

It should be noted that in this state alone, the icon will slide into view and leave enough space for the "Download" tag, but the tag will float outside the button when hovering.

At this time, adding scale(1, 1) to the button can keep the content complete.

 /* Hover status*/
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
  transform: scale(1, 1);
}

padding value is an experience value and will change according to factors such as font, font size, etc.

Finally, transition attribute smooths the animation transition and improves the user experience.

 /* Default status*/
.button {
    background: 
      #f6bc00 
      url(data:image/svg xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
    transition: padding .2s ease, background-position .2s ease, transform .5s ease;
}

Add some detailed modifications, such as rounded corners, and you will get a beautiful button.

The above is the detailed content of Recreating Netlify's Neat-o Sliding Button Effect. For more information, please follow other related articles on the PHP Chinese website!