Up next in 10
How to Add Animated Download Button using HTML & CSS
7K views
Jan 25, 2024
In this video tutorial, the creator guides viewers through the process of adding an animated download button to a webpage using HTML and CSS. The content likely covers step-by-step instructions on coding and styling the button to create a visually appealing and dynamic element. Viewers can expect to learn how to incorporate HTML for structure and CSS for styling and animation effects, resulting in a button that not only serves a functional purpose but also adds a visually engaging aspect to the website. This tutorial is ideal for individuals looking to enhance the design and interactivity of download buttons on their web projects.
View Video Transcript
0:00
Hi guys, welcome to Kitu blogging and in this video I will show you how you can add a download
0:05
button to your blogger and WordPress website. So as you can see, this is how the download button looks like and you can add two buttons
0:14
at the same time or you can use a single download button like this in your blogger and
0:19
Waterpress website. So let me just show you how you can do that
0:24
And before that, if you found this video helpful, then make sure to hit the like button
0:30
So let me just go to blogger dashboard and I have opened a blog post here
0:35
And then you need to switch to the HTML view and here you will see a code like this
0:40
And I will leave the download link of this code in the description. So after downloading the code you need to copy the code and then paste it in the HTML view here
0:50
And if you are using WordPress, then you can simply search for custom HTML block and paste that same code
0:57
So here you need to add the link of the button and as you can see this is the link of second
1:05
button here and this is the CSS code. So this download button is based on pure CSS and use the SBG icon so it will not also
1:14
impact the space speed and here you can change the text here like this here you can change
1:20
demo to something like free view or live preview like that and you can also change the button text like download and there is second text click here So when you hover this it will show a different text like click here you can change the button text like download and there is second text click here So when you hover this it will show a different text like click here you can change that
1:34
also here in this Pan tag. So if you want to just add a download button then I will show you how you can do that
1:44
So this is another code. This is basically the same code but here I have removed the fast button and only included the
1:51
download button. And here you can add the download link here. As you can see, I have added a Google Drive download link
2:00
So you can just go to Google Drive and click on upload file here and after that just right click
2:07
on it and here you will see the option get link. And here you need to switch any switch from restricted to anyone with the link and then
2:18
you can use some Google Drive direct link generator website like that
2:23
and you can paste the info to URL and it will generate a direct download link of Google Drive
2:29
So you can use any of the website from here. And after that let me just show you
2:35
So when I click on here, it will download that file directly to my computer
2:40
So this is how the download button works. And let me just show you
2:45
So let me just copy all code from here and I will go to WordPress and I will paste the code here
2:51
And as you can see the download button is added here So you can also change the color of this download button and everything using the CSS code So let me just click on inspect here and here this is the anchor tag here and here you can see
3:07
the circle. So let's click on here and here you will see this option button slider too
3:14
So let me just change the color of this download button here
3:18
So let's change it to something like yellow. Okay, now let's change the fill color from here
3:28
Now let's click on Span tag here and you can change the circle color from here
3:36
As you can see the color is now changing. So you can basically change the color of the circle, change the border color here and you can
3:43
also change the text color. You can if you want to change the download text color then you can change the color from here
3:52
So let's make it black here. You can also change the SBG icon from here
3:57
Suppose I want to change the SBG icon of this download button
4:01
Then what I can do is simply search for download. Download button as BG
4:11
And let me just find any website from here. So let's find it in Fond Awesome
4:22
Let click on here and let me go back and let click on here Fond Awesome icon And here you can find different icon here
4:36
So let's add a different download button here. So let's find the download here
4:48
And as you can see you will see a variety of download button. So let's click on free from here
4:53
Now let me just choose another download button. Let's add a card button here
5:00
So I will click on here. Let's click on copy SBG code from here and then I will go to this code and I will replace
5:09
the SBG code here. Now let's click on update here. Now let me just refresh this page and as you can see the card button is now added instead
5:22
of download and you can change the text from download to buy now so let me just do that now let's
5:30
click on update now let me just refresh this page and as you can see now the download button
5:36
is changed to a buy now button so this is how the download button works and you can use the
5:42
same download button in blogger and WordPress website and if you have any doubt regarding
5:47
this then you can ask me in the comment section and if you found this video interesting then
5:52
make sure to hit the like button and subscribe to our channel
5:56
I will see you in the next video. Thank you
#Blogging Resources & Services
#Skins
# Themes & Wallpapers