In today’s video I’ll be showing you how to create a button with icons using HTML & CSS. This is easily done, and can be added to your own website or project.
Link to source code:
https://codepen.io/dcode-software/pen/JjEEPbG
Icon library used (Ionicon):
https://ionicons.com/
Join this channel to get access to perks:
https://www.youtube.com/channel/UCjX0FtIZBBVD3YoCcxnDC4g/join
π Join my Discord Server:
https://discord.gg/TXMQyvbpcA
π¨ Download my Visual Studio Code theme:
https://marketplace.visualstudio.com/items?itemName=dcode.dcode-theme
Support me on Patreon:
https://www.patreon.com/dcode
Follow me on Twitter:
@dcodeyt
If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css
source
how to put link in button plz know me…
Bro how can I contact you
I think you are Iranian guy?or may be your face look like us hahahahahaha
amazing thank you so much
Thnak you bhai.
how to add site link to this button?
worst tutorial by dum
thankssssss
Thanks this was a great help I just now have to figure out how to put this button into the Tabs section of my website at the top. I cant figure out where all this button detail stuff goes with my tab stuff.
WHERE DA RESET BUTTON
So wait is over!!!
Our First video of Website Designing Series has been uploaded. Introduction To HTML. A foundation language for creating websites.
π WATCH NOW! π
https://youtu.be/RuMXcdZ6p3c
#learnhtml #websitedesign #webdesign #htmltutorial #html5 #html #htmlcourse #webdesigncourse #whatishtml
Great video!! How could I replace de icon with a Logo? Thanks!
hey Guys help the Ion Icon is not showing
LA MEJOR EXPLICACION DIOS MIO QUE BUEN TUTORIAL
it dont help that the button dont do nothin -_-
Thank you so much for this! π
veri good
Adore your explanationSπ₯°
How do I add a link to this button?
This is really good video. Thank you !!
πππππ
+1 sub
How to add hyperlink to this button
Nice knowledge Brother 2
You are my brother for now on
Awesome sir. +1 subscriber Congrats. How to hyperlink the button
how link that button.
This was excellent! Got through it and my button is there!, but im not sure how to connect it to the next page ive created?
Please help!
Thank you for this video! I needed to get back and refresh some stuff in terms of creating buttons. Really good source for that! Thanks once again. Cheers! π
I'm trying the follow this tutorial when it is my first time using JS/HTML/CSS after 4 hrs
<button type="button" className="button">
<span className="button__icon"><ion-icon name="apps-outline"></ion-icon></span>
</button>
This code does not work, video not valid
Thank you. Do you provide private consultation? I'd like to add an image instead of icons..please guide π
Epic design lies within subtlety! Your brand color and vs code theme color matches so well! Can I find it on the Marketplace?
Bro, I have a question. How do I make the button working, like you click it and it brings to a link you put in the code?
Jesus is King! If you do not know Jesus as Savior please pray, β Jesus save me. At this moment I choose to have faith that You gave Your life for me and rose from the dead. Doing this You defeated death, even though it meant You had to die. You surrendered Your life for me, so I chose to surrender my life to You. Forgive me Jesus, my God. Amen.β
Jesus loves you so much. Please accept His love. I encourage you to read the Bible and pray.
βFor God so loved the world that he gave his one and only begotten only Son into this world, that whoever believes that in him shall not perish but have eternal life.β
John 3:16
πβ€οΈπ
Jesus is enough!
Again I tell you, Jesus loves you!
Jesus Christ loves you!
we pay huge fees to be taught all these yet still we always come back to a youtuber like this awesome guy to understand them better… u did all bro +1 subscriber
Awesome man ! Thanks a lot +1 subscriber
sa
Why using so much code and not only the button tag? You can simply use pseudo elements for this.
Keep up the good jobπ
still on light theme? π
You are a motivation for me…
Awesome Bro
Why did you use inline-flex for button__text and button__icon? In my view you only need this if the elements are in a text flow, which they are not because the parent container is display flex?
Γtimo vΓdeo parabΓ©ns π.
That's the way to go!
What is the name of your Vs code theme?