DEV Community: Mohammad Sahragard

Download Button: Interaction Animation Effects

Mohammad Sahragard — Thu, 08 Sep 2022 22:42:41 +0000

Demo:

If you don't feel like reading the text, see: https://youtu.be/GqeuTyft0kE

Description:
This is a cool effect and animation for download buttons. Useful and without empty lines, let's count, there are 60 lines. I hope you like it ❤️✌🏻.

Technologies Used:

HTML
CSS
Javascript

Now, let's go.

At the earliest step, write the HTML codes:

    <div class="container">
        <button class="button">
            <div class="progress"></div>
            <span class="value">Download</span>
        </button>
    </div>

<progress>, is the element that has a linear gradient background.

Ok, let's write the CSS codes: (part 1)

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #23232f;
}

.button {
    all: unset;
    height: 50px;
    width: 120px;
    text-align: center;
    background-color: dodgerblue;
    color: #fff;
    border-radius: 5px;
    outline: 2px solid royalblue;
    outline-offset: 5px;
    transition: 0.4s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.button:active {
    transform: scale(0.9);
}

Now, Part 2:

.progress {
    position: absolute;
    inset: -20px 0 0 0;
    background-image: linear-gradient(to top, royalblue, deeppink);
    clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
}
.value {
    position: relative;
}


.button.start-download {
    width: 50px;
    border-radius: 50%;
}

.start-download when clicked on button element, is added.

Well, now it's time for JavaScript:

const $ = document;
const query = queryItem => $.querySelector (queryItem);

// ------- data
const button = query ('.button');
const progress = query ('.progress');
const value = query ('.value');
let percent = 0;

// ------- function's
const startDownload = () => {
    const intervalItem = setInterval (() => {
        button.removeEventListener ('click', startDownload);
        percent++;

        button.classList.add ('start-download');
        progress.style.inset = `${percent}% 0 0 0`;
        value.innerHTML = `${percent}%`;

        if (percent === 100) {
            clearInterval(intervalItem);
            percent = 0;
            button.classList.remove('start-download');
            progress.style.inset = '-20px 0 0 0';
            value.innerHTML = 'Download';
            button.addEventListener('click', startDownload);
        }
    }, 30);
}

// ------ event's
button.addEventListener('click', startDownload);

Done! That's it, I'd like to know your opinion 🙋🏻❤️🔥.

Follow Me In:

Responsive Profile Page

Mohammad Sahragard — Tue, 06 Sep 2022 18:52:29 +0000

Well, this is the first project that I recorded for YouTube and shared the source code on GitHub.
This is a simple profile page. And I designed the user interface (UI) myself, Ok, not good 😂🤦🏻 Sorry, but it was my first design.
I like your comments ❤️🙏.

For Support Me, See:

Technologies Used

HTML
CSS

For More Tutorials:

(I mean follow and sub me. Because I don't have a video yet, this was my first video 😂.)

Twitter: MammadSahragard
Instagram: mammad.sahragard
Linkedin: MohammadSahragard
GitHub: MohammadSahragard
YouTube: MohammadSahragard

About Me

Mohammad Sahragard — Tue, 30 Aug 2022 13:58:19 +0000

Hello everyone, I am Mohammad, I'm 20 years old, and I have been working in the field of front-end development for 3 years, since 2019. 👨‍💻
Before entering this field, I worked in graphic design including logo design for 1 year. ✒️
I'm also a teacher of Persian literature. 🧑🏻‍🏫😅🤦🏻

My Services

Web development 🌐
UI/UX design 👨‍💻
Education in social media

My Languages

Persian (native)
English (almost 60 percent)

My Skill Set

HTML
CSS
JS
Bootstrap
SASS
ReactJS
Animate.css
ChartJS
Wordpress
Figma
Adobe Illustrator
Adobe Photoshop
Adobe Xdesign
Adobe After Effects
Adobe Premiere Pro
Blender

Connect with me

GitHub
Instagram
LinkedIn
Twitter
YouTube