Easily Create Buttons With Icons Using HTML & CSS - Web Development Tutorial

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

[@jossiahtetteh4326]

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

[@juanraostos6713]

@adheesh Mishra g

[@juanraostos6713]

@@communistrussia2668 g

[@juanraostos6713]

@adheesh Mishra g

[@juanraostos6713]

jj

[@juanraostos6713]

@@communistrussia2668 rr

[@jakobo5521]

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! :)

[@ShaudaySmith]

Dude, you just rocked my prenatal understanding of css. this was soooo helpful!!

[@lotannaezeuko7157]

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.

[@dcode-software]

That's a very nice compliment, thank you! Happy to help

[@irun_mon]

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.

[@dcode-software]

Thank you! That's something that I really try to focus on in my content - not leaving out the little details.

[@Fred-my9er]

I like how you explain every single thing. thanks

[@MrSalFav]

This is really good video. Thank you !!

[@amplimagic2216]

Thanks! Helped me a lot

[@__jake.m]

Thank you so much for this! :D

[@dcode-software]

You're welcome!

[@bonganihbonderah9541]

Thanks man So helpful.

[@franco9571]

LA MEJOR EXPLICACION DIOS MIO QUE BUEN TUTORIAL

[@saraeissa4954]

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.

[@SealSal]

I'm trying the follow this tutorial when it is my first time using JS/HTML/CSS after 4 hrs

[@byleexs1991]

best tutorial I've seen on buttons yet! Instalike

[@brythm5465]

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!

[@stern7658]

this is the only video i found that show how to do this

[@Chopitupwithme]

Thanks!

[@nq2c]

amazing thank you so much

[@tellstod3350]

Thnak you bhai.

[@emmanuelrf]

Nice and easy; simple, but elegant! 👌🏼

[@dcode-software]

Thanks!

[@bendsi4530]

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

[@septimusforster]

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.

[@adelm2887]

Awesome man ! Thanks a lot +1 subscriber

[@dcode-software]

😁

[@georgianvineyard]

thank you for the video. i have one question why all in html ? why dont you put style part in css ?

[@ob7349]

Adore your explanationS🥰

[@dcode-software]

No problem ☺️

[@marjkatb760]

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

[@valentinarojic8466]

Great video!! How could I replace de icon with a Logo? Thanks!

[@Soamy_adhikari28]

Thanks this is helpful for me 👍👍👍 can we fix size of icons

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@Barresider]

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?

[@Barresider]

@Geex Trix yes but I think display flex for these items would be enough, not inline-flex. Or not?

[@dcode-software]

Flex is enough but span tags are inline by default so using inline-flex is closer to default then flex

[@Barresider]

@@dcode-software Oh yes thats right, thanks! Btw. Great video!

[@Micychalek]

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?

[@winartlk4894]

thanks bro

[@farshidkaviyani692]

veri good

[@exlerindia8108]

Awesome sir. +1 subscriber Congrats. How to hyperlink the button how link that button.

[@BodhisatwaSinha]

thankssssss

[@kitt3521]

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.

[@elmetiu]

What font are you using in visual studio code?

[@sunman.official]

Keep up the good job💙

[@dcode-software]

Thanks mate

[@joshman844]

How would i add the installation to an already made JS file i have linked to the html?

[@whitebear224]

Thank you! These look awesome.

[@dcode-software]

You're welcome 🙂

[@whyisthiscodenotworking]

@@dcode-software Your tuts are awesome Don't stop

[@rangabharath4253]

awesome as always :-)

[@dcode-software]

Thanks again

[@kylenault9295]

How do I add a link to this button?

[@anangfirmansyah6488]

what font you using in visual studio?

[@MaksymMinenko]

That's the way to go!

[@iustincobuz561]

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?

[@mdjuberpaid1]

Sir you describes well

[@dcode-software]

I appreciate that, thanks!

[@BadDevil]

Brother, how can I put a link in it or how can I make it responsive?

[@CoolCoder_]

wrap the button in an anchor tag and hyper refrence what you want

[@GREAT_FOODS_]

how to put link in button plz know me...

[@axpect.]

How to add hyperlink to this button

[@ifourstudio3432]

how to add site link to this button?

[@KostaTsourdalakis]

GOAT

[@dcode-software]

🐐

[@Sandeep0917]

I am getting error.. can u please help me out

[@nikhilmwarrier7948]

Cool!

[@swoorp]

How to do you make the chrome tab width smaller???🧐

[@nikhilmwarrier7948]

Right-click -> pin tab

[@swoorp]

@@nikhilmwarrier7948 oh thanks! i got it now 😂

[@arkinsantos5737]

WHERE DA RESET BUTTON

[@zawadahmed9111]

What is the name of your Vs code theme?

[@dcode-software]

I use my own theme which I created, it's called "dcode"

[@dhpshow9277]

it dont help that the button dont do nothin -_-

[@groovebird812]

Why using so much code and not only the button tag? You can simply use pseudo elements for this.

[@samettopal0]

sa

[@yiwang3185]

ddff

[@harpermartin7813]

Jesus Christ loves you!

[@jalalejlali1640]

I think you are Iranian guy?or may be your face look like us hahahahahaha

[@dcode-software]

Almost. I have an Italian background

[@MsCellobass]

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!

[@mdjuberpaid1]

Are you indian

[@nikhilmwarrier7948]

Australian

[@CreativSock]

@@nikhilmwarrier7948 with itallian background

[@errinwright]

This code does not work, video not valid

[@thengakola6217]

still on light theme? 👎

[@madugulahariprasad672]

Bro how can I contact you