This project is for designing a download button, when in hover state, the button shows a green background swiping across the button area. The button is an a tag with two spans, one for the text of download, the other is for holding the font awesome icon of download.
To shape the button, border and its radius are used; I also used flex display to arrange the two spans.
How to remove extra space in "a" tag?
In the
.main-btn class, a
align-self:flex-start is used for removing the extra empty space of the
a tag, which means it can wrap around its content of the two
span tags without a dragging empty space on the right. However, in order for this to work properly, its immediate parent element should have
display:flex; That is why
.btn-con is used for wrapping this
a tag.
overflow:hidden is important for the swiping animation
In .main-btn class, if overflow:hidden; is commented out, the animation outside of the download button space will also be seen, which is very awkward. By having this overflow:hidden; defined, the smooth animation from right to left looks perfect.
User ::before pseudo class to achieve the animation
In normal state for ::before, set its position to be absolute, meantime, make sure the element from where the ::before is produced has a 'relative' display. This is to say the .main-btn class has a position:relative;. Also z-index:-1; is to make sure the text and the icon can still be seen when in hover state.
One very important detail here is to have width, height and background color to be defined only in the hover state. This way, when cursor moves away and the hover state is finished, the green background added by ::before will immediately disappear. Otherwise, if adding the width, height and background color in the normal state of ::before class, when cursor leaving the area, the swiping-back-to-right reversed animation can be observed, this is because the whole background needs to move to the right defined by transform:translateX(100%);, that doesn't look right.
For the complete code, check it out below. Also the actual animation effect can be observed using the codepen embedding at the end, just hover over the button, you can see the animation.
index.html :
<div class="btn-con">
<a href="#" class="main-btn">
<span class="btn-text">Download</span>
<span class="btn-icon"><i class="fas fa-download"></i></span>
</a>
</div>
styles.css
a {
font-family: inherit;
color: inherit;
text-decoration: none;
}
.btn-con {
display: flex;
}
.main-btn {
border-radius: 30px;
border: solid 1px rgb(130, 127, 127);
display: flex;
align-items: center;
align-self: flex-start; // this removed extra right empty space.
position: relative;
overflow: hidden; // without this the animation is wrong with the overflow part seen from the start of the animation.
.btn-text {
padding: 0 2rem;
}
.btn-icon {
border-radius: 50%;
background-color: rgb(33, 132, 33);
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
&::before {
content: "";
position: absolute;
transform: translateX(100%);
transition: all 2s ease-out;
z-index: -1;
}
&:hover::before {
transform: translateX(0);
width: 100%;
height: 100%;
background-color: rgb(33, 132, 33);
}
}
See the Pen
download btn w/ sliding animation by Susan G (@Koo8)
on CodePen.
