Easily Create Buttons With Icons Using HTML & CSS - Web Development Tutorial
HTML-код
- Опубликовано: 30 мар 2021
- View the Code & CodePen:
dcode.domenade.com/tutorials/...
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.
Icon library used (Ionicon):
ionicons.com/
Join this channel to get access to perks:
/ @dcode-software
💜 Join my Discord Server:
/ discord
🎨 Download my Visual Studio Code theme:
marketplace.visualstudio.com/...
Support me on Patreon:
/ 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
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
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
@adheesh Mishra g
@@communistrussia2668 g
@adheesh Mishra g
jj
@@communistrussia2668 rr
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! :)
Dude, you just rocked my prenatal understanding of css. this was soooo helpful!!
this is one of the best videos that i have watched in regards to coding. Everything is so clear and the files are very easy to access. Thank you.
That's a very nice compliment, thank you! Happy to help
I like how you explain every single thing. thanks
This is really good video. Thank you !!
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!
very awesome tutorial and beginners friendly, explained every step even the small ones, many tutorials just skip those parts and I don't know what they did and just assume people just know what they're doing.
Thank you! That's something that I really try to focus on in my content - not leaving out the little details.
Thanks! Helped me a lot
Thanks man
So helpful.
LA MEJOR EXPLICACION DIOS MIO QUE BUEN TUTORIAL
best tutorial I've seen on buttons yet! Instalike
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?
I'm trying the follow this tutorial when it is my first time using JS/HTML/CSS after 4 hrs
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.
Hey, man. Glad to finally see you! But I gotta say, your voice never matched my imagination of your visage. But you're all right.
thank you for the video. i have one question why all in html ? why dont you put style part in css ?
Thank you so much for this! :D
You're welcome!
this was a great video! I have an issue though, because there's red squiggly lines under the words on my button and I don't know what's wrong or how to fix it
How do you get it to save though? I had a functioning button that allowed users to download their image from the page, but now that I styled it, I can't get it to work anymore.
this is the only video i found that show how to do this
Great video!! How could I replace de icon with a Logo? Thanks!
amazing thank you so much
very well explained mate but I would suggest not giving the container height instead give padding to both the text inside the button and the icon
Ótimo vídeo parabéns 👏.
what if I make a button appear in the document with .createElement under certain conditions how could I incorporate that image for the button since the button element will appear rather than be built in the html doc in the first place?
Thanks!
Nice and easy; simple, but elegant! 👌🏼
Thanks!
Thnak you bhai.
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?
@Geex Trix yes but I think display flex for these items would be enough, not inline-flex. Or not?
Flex is enough but span tags are inline by default so using inline-flex is closer to default then flex
@@dcode-software Oh yes thats right, thanks! Btw. Great video!
Awesome man ! Thanks a lot +1 subscriber
😁
How would i add the installation to an already made JS file i have linked to the html?
Adore your explanationS🥰
No problem ☺️
Awesome sir. +1 subscriber Congrats. How to hyperlink the button
how link that button.
Thanks this is helpful for me 👍👍👍 can we fix size of icons
what font you using in visual studio?
How do I add a link to this button?
What font are you using in visual studio code?
thanks bro
awesome as always :-)
Thanks again
Keep up the good job💙
Thanks mate
veri good
thankssssss
That's the way to go!
Thank you! These look awesome.
You're welcome 🙂
@@dcode-software
Your tuts are awesome
Don't stop
Brother, how can I put a link in it or how can I make it responsive?
wrap the button in an anchor tag and hyper refrence what you want
how to put link in button plz know me...
how to add site link to this button?
How to add hyperlink to this button
I am getting error.. can u please help me out
Sir you describes well
I appreciate that, thanks!
How to do you make the chrome tab width smaller???🧐
Right-click -> pin tab
@@nikhilmwarrier7948 oh thanks! i got it now 😂
GOAT
🐐
What is the name of your Vs code theme?
I use my own theme which I created, it's called "dcode"
WHERE DA RESET BUTTON
Cool!
Why using so much code and not only the button tag? You can simply use pseudo elements for this.
it dont help that the button dont do nothin -_-
Jesus Christ loves you!
sa
ddff
I think you are Iranian guy?or may be your face look like us hahahahahaha
Almost. I have an Italian background
are you kidding me??!! you can create a good looking button with just a couple of lines with inline styling! and adding an icon shouldnt have to be that elaborate!
Are you indian
Australian
@@nikhilmwarrier7948 with itallian background
This code does not work, video not valid
still on light theme? 👎
Bro how can I contact you