Easily Create Buttons With Icons Using HTML & CSS

No video

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

Рет қаралды 175,040

Күн бұрын

View the Code & CodePen:
dcode.domenade...
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.vi...
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

Пікірлер: 99

@jossiahtetteh4326 3 жыл бұрын

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 2 жыл бұрын

@adheesh Mishra g

@juanraostos6713 2 жыл бұрын

@@communistrussia2668 g

@juanraostos6713 2 жыл бұрын

@adheesh Mishra g

@juanraostos6713 2 жыл бұрын

@@communistrussia2668 rr

@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

@jakobo5521 2 жыл бұрын

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

@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 2 жыл бұрын

I like how you explain every single thing. thanks

@brythm5465 2 жыл бұрын

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!

@septimusforster 9 ай бұрын

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.

@SealSal 2 жыл бұрын

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

@stern7658 Жыл бұрын

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

@saraeissa4954 2 жыл бұрын

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.

@byleexs1991 Жыл бұрын

best tutorial I've seen on buttons yet! Instalike

@Barresider 3 жыл бұрын

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 3 жыл бұрын

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

@dcode-software 3 жыл бұрын

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

@Barresider 3 жыл бұрын

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

@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

@exlerindia8108 2 жыл бұрын

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

@franco9571 2 жыл бұрын

LA MEJOR EXPLICACION DIOS MIO QUE BUEN TUTORIAL

@Chopitupwithme Жыл бұрын

Thanks!

@MrSalFav 2 жыл бұрын

This is really good video. Thank you !!

@tellstod3350 2 жыл бұрын

Thnak you bhai.

@bonganihbonderah9541 7 ай бұрын

Thanks man So helpful.

@Micychalek 3 жыл бұрын

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?

@amplimagic2216 2 жыл бұрын

Thanks! Helped me a lot

@valentinarojic8466 2 жыл бұрын

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

@__jake.m 2 жыл бұрын

Thank you so much for this! :D

@dcode-software 2 жыл бұрын

You're welcome!

@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

@Soamy_adhikari28 Жыл бұрын

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

@georgianvineyard Жыл бұрын

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

@joshman844 Жыл бұрын

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

@AmeRay678 24 күн бұрын

hi @dcode, Everything works so far but I'm struggling in even having the icon show up. Can you help me?🙇‍♀ Thank you

@kylenault9295 2 жыл бұрын

How do I add a link to this button?

@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?

@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.

@BadDevil 2 жыл бұрын

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

@nq2c 2 жыл бұрын

amazing thank you so much

@emmanuelrf 3 жыл бұрын

Nice and easy; simple, but elegant! 👌🏼

@dcode-software 3 жыл бұрын

Thanks!

@elmetiu Жыл бұрын

What font are you using in visual studio code?

@winartlk4894 2 жыл бұрын

thanks bro

@ob7349 2 жыл бұрын

Adore your explanationS🥰

@dcode-software 2 жыл бұрын

No problem ☺️

@adelm2887 3 жыл бұрын

Awesome man ! Thanks a lot +1 subscriber

@dcode-software 3 жыл бұрын

😁

@whitebear224 3 жыл бұрын

Thank you! These look awesome.

@dcode-software 3 жыл бұрын

You're welcome 🙂

@whyisthiscodenotworking 3 жыл бұрын

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

@farshidkaviyani692 2 жыл бұрын

veri good

@anangfirmansyah6488 Жыл бұрын

what font you using in visual studio?

@Sandeep0917 Жыл бұрын

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

@romuloalves9349 3 жыл бұрын

Ótimo vídeo parabéns 👏.

@axpect. 2 жыл бұрын

How to add hyperlink to this button

@GREAT_FOODS_ 2 жыл бұрын

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

@swoorp 3 жыл бұрын

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

@nikhilmwarrier7948 3 жыл бұрын

Right-click -> pin tab

@swoorp 3 жыл бұрын

@@nikhilmwarrier7948 oh thanks! i got it now 😂

@arkinsantos5737 2 жыл бұрын

WHERE DA RESET BUTTON

@rangabharath4253 3 жыл бұрын

awesome as always :-)

@dcode-software 3 жыл бұрын

Thanks again

@ifourstudio3432 2 жыл бұрын

how to add site link to this button?

@mdjuberpaid1 3 жыл бұрын

Sir you describes well

@dcode-software 3 жыл бұрын

I appreciate that, thanks!

@BodhisatwaSinha 2 жыл бұрын

thankssssss

@MaksymMinenko 3 жыл бұрын

That's the way to go!

@sunman.official 3 жыл бұрын

Keep up the good job💙

@dcode-software 3 жыл бұрын

Thanks mate

@KostaTsourdalakis 3 жыл бұрын

GOAT

@dcode-software 3 жыл бұрын

🐐

@zawadahmed9111 3 жыл бұрын

What is the name of your Vs code theme?

@dcode-software 3 жыл бұрын

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

@dhpshow9277 2 жыл бұрын

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

@groovebird812 3 жыл бұрын

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

@nikhilmwarrier7948 3 жыл бұрын

Cool!

@MsCellobass 2 жыл бұрын

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!