Botão de download com ícone animado
CSS
.download-button-animated-icon .elementor-button-icon {
position: relative;
}
.download-button-animated-icon .elementor-button-icon svg {
opacity: 0;
}
.download-button-animated-icon .elementor-button-icon::before,
.download-button-animated-icon .elementor-button-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.download-button-animated-icon .elementor-button-icon::before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.download-button-animated-icon .elementor-button-icon::after {
width: 0;
height: 0;
margin-right: 4px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: download-button-animated-icon 1s linear infinite;
animation-play-state: paused;
}
.download-button-animated-icon:hover .elementor-button-icon::before {
border-color: #cdefbd;
}
.download-button-animated-icon:hover .elementor-button-icon::after {
border-top-color: #cdefbd;
animation-play-state: running;
}
@keyframes download-button-animated-icon {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0.4;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0.4;
}
}
Instruções de uso
If it's to be used only once, add the CSS code in the "Custom CSS" field located in the "Advanced" tab of the widget where the CSS Class was applied. If it's to be used across multiple widgets on a single page, open "Page Settings" (gear icon) and add the CSS code in the "Custom CSS" field located in the "Advanced" tab of the "Page Settings." If it's to be used across multiple widgets on multiple pages, open "Site Settings" (sliders icon) and add the CSS code in the "Custom CSS" field located under "Custom CSS" in the "Site Settings."
HTML
.download-button-animated-icon
Instruções de uso
Add the class in the "CSS Classes" field located in the "Advanced" tab of the Button widget
Referência
Uiverse.io
G4b413l
