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

47 Comments

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

  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! πŸ™‚

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

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

  5. 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?

Leave A Reply

Please enter your comment!
Please enter your name here