HomeЛюди и блогиRelated VideosMore From: Timothy Arterbury

HTML & CSS Link Button Swag

238 ratings | 27483 views
So yah, this video teaches you how to make a swag button link in straight up HTML and CSS. I hope this helps you in your epic web development quest. If I did anything stupid or annoying, please leave a comment. Also if you wanna check my dope website go here: http://timart.me
Html code for embedding videos on your blog
Text Comments (81)
Isabel (1 year ago)
So much swag.
Timothy Arterbury (1 year ago)
Swag is my life.
MOBA IS LIFE (1 month ago)
ok sir awesome video thanks!😍
Timothy Arterbury (1 month ago)
Thank you! I need to do more of these cuz they're fun
MOBA IS LIFE (1 month ago)
sir where is the download button
Timothy Arterbury (1 month ago)
For dat code? I think I have lost it sadly, probably on some old external hard drive I have :(
Во По (3 months ago)
обучайся гласить по русски.
Rj Prevendido (4 months ago)
I love the tutorial cause it makes coding so casual and not something you should stress about but i can't see the code tho :V do you have like a page where i can view the code for this? thanks man
Timothy Arterbury (4 months ago)
Thanks so much!! In future videos I'll be sure to make the font size larger. I'm not at my computer now, but I'll see if I can find the code later this week to upload somewhere!
Mark Daniel (4 months ago)
This was good besides the gay swag shit, I guess this was funny in 2015.
Mark Daniel (4 months ago)
FOR THE LOVE OF GOD TIM!
Timothy Arterbury (4 months ago)
I do continue to enjoy occasionally saying swag tho haha
Mark Daniel (4 months ago)
:)
Timothy Arterbury (4 months ago)
Mark Daniel You right
Sarah Britny (5 months ago)
Do you have any '' web development '' Course ? I just love your this tutorial. You should be a "web development" teacher.
Nic Hughes (6 months ago)
thank so much. really like your style.
Nic Hughes (6 months ago)
I use wordpress so not sure about adding HTML. i can add css
Nic Hughes (6 months ago)
That would be ultra swag!
Timothy Arterbury (6 months ago)
Well dang, that is swag! If you learn how to make the menu, you can easily drop in the button <a> tag into any spot on the webpage you make. I’ll try to make a video on making a menu like that soon!
Nic Hughes (6 months ago)
nah, check this menu on this site. They have the swag button in the menu. Thats pretty sick. https://www.myacleaningservice.com/.
Timothy Arterbury (6 months ago)
Like a dropdown menu?
NortoNNN! Anti Kill (8 months ago)
thank you very much! <3
jonassx100 (9 months ago)
so crispy clicks ,, which keyboard>?
Timothy Arterbury (7 months ago)
Lolz so crispy, macbook
TheSp00kyWizard (9 months ago)
Too much swag to handle...
Timothy Arterbury (9 months ago)
You right, it was actually difficult for me to handle making the video due to the amount of swag I was putting into it
Alpha K (9 months ago)
Excellent
Timothy Arterbury (9 months ago)
Alpha K Thank you!
Kaung Phone Wai (1 year ago)
hey i got underlining the dat swag how to remove it???
Kaung Phone Wai (11 months ago)
ok then i will....
Timothy Arterbury (1 year ago)
Here's a link to one of em: https://www.youtube.com/watch?v=z1c1-CwaI8w&t=1s
Timothy Arterbury (1 year ago)
Glad I could help, and thanks for the subscription! I'll try to make more fun coding videos like this. Also, if you're into music, I've got a few videos of this super weird music instrument I'm making: MoveMIDI. I want people to make dope beetz with it, so share with any of ur musical friends
Kaung Phone Wai (1 year ago)
wowww its work thzzz dude.. u know i just working for my assignment from school and u helped me, thank alots dude.... i suscribed ur channel....
Timothy Arterbury (1 year ago)
Oh you're so close! When you wrote: .donate a { text-decoration: none; } You basically said, "Inside the element with class 'donate', look for an <a> tag". But the <a> tag in your HTML doesn't have another <a> tag inside it. Instead, move the line `text-decoration: none;` inside the .donate class so it looks like this: .donate { color: #31a6ff; font-family: arial; margin-right: 50px; font-size: 50px; text-align: center; border: solid 2px #31a6ff; border-radius: 50px; padding: 5px 70px; text-decoration: none; } and get rid of: .donate a { text-decoration: none; } Let me know if this works!
Best way to show people how to code, and make it fun
Timothy Arterbury (1 year ago)
Haha thanks so much! Glad you had fun with it.
Billy Lowe (1 year ago)
Help Timothy. Trying to see this,,, but trying to create some cool shop now buttons on my site - thanks much,,,, ,,, Please get back to us.
Timothy Arterbury (1 year ago)
Billy Lowe, Hey Billy! Was my button demonstration lacking in the swag you are looking for? What kind of swag button are you looking for? Let me know how I can help.
MrZitrus (1 year ago)
I liked this Video because its so Swaggy.
Timothy Arterbury (1 year ago)
Lolz thank you
Jacktone Okwemba (1 year ago)
thanks, but i saw nothing .. try and zoom your work
Timothy Arterbury (1 year ago)
Thanks, I'll definitely make the font size bigger in future tutorials.
iDevBloxx (1 year ago)
cringe just like roblox
Boosted Bot (1 year ago)
dam the swag
Timothy Arterbury (1 year ago)
You right
Fischhändler (1 year ago)
rly Swag :D
Timothy Arterbury (1 year ago)
Lolz yus
Bolands Designs (1 year ago)
Thank you so much!
Arpesh Shrivastava (1 year ago)
what is the name of text editor you use?
Timothy Arterbury (1 year ago)
Arpesh Srivastava It's Coda by Panic
Caleb Tupper (1 year ago)
This video deserves more views
MakiArts (1 year ago)
Nice video and nice website but i tried to do this and it did not work (sry for bad english) :/
Timothy Arterbury (1 year ago)
Did anything show up in the browser when you tried it?
Aladahalli S Bakkesh (1 year ago)
please do share the html and css code in text format.
LeagueOfKaneki (2 years ago)
How to remove the line?
Timothy Arterbury (2 years ago)
LeagueOfKaneki Ohhhh, so the default styling of a link (the <a><\a> tags) is to have it underlined. You could style all of the links on a page to not have an underline or you could style just the button. The property you need to modify is text-decoration and set it to none. So: a { text-decoration: none; } OR .swagButton { text-decoration: none; }
LeagueOfKaneki (2 years ago)
Like the underline beneath the words
Timothy Arterbury (2 years ago)
LeagueOfKaneki Probably border: none
David Bryant (2 years ago)
just wondering what word processor did you use?
Timothy Arterbury (2 years ago)
Do it! Also, Coda 2 is a paid program, but if you're looking for something free, Atom is a great option: https://atom.io/
David Bryant (2 years ago)
Yup!! Thanks I been using notepad and it's been a struggle. I'm definitely go to try it.
Timothy Arterbury (2 years ago)
I used Coda 2 for code editing. Is this the program you are referring to?
J S (2 years ago)
What is the name of the graphic program you used? (2:34)
Timothy Arterbury (2 years ago)
It's called Sketch. I freakin love it. https://sketchapp.com/ It is a mac only application though
Snork Town (2 years ago)
How would I make the underline be removed? It keeps saying there
Timothy Arterbury (2 years ago)
Snork Town Yes there's actually a lot of ways. I would research flexbox (it's the new CSS alignment property that is gaining popularity). Another way is to wrap each button in a <div> in the HTML. Give that div a class like column or something, so: <div class="column"> <a>The Button</a> </div> Then in CSS: .column { display: inline-block; width: 33.333%; text-align: center; } That should work I think. Also, a lot of people run into the same CSS problems, so I often google how to do something in CSS and there will probably be an article on how to do it. Good luck!
Snork Town (2 years ago)
Timothy Arterbury thanks mate. Also is there feasible way to horizontally align three of those buttons at the left, center and right side of the page?
Timothy Arterbury (2 years ago)
Snork Town You should set the property "text-decoration: none" for any links. Browsers will default to give all links an underline, so you must explicitly write in this property for the <a> tag link. In CSS: a { text-decoration: none; }
Fayaz siraj (2 years ago)
awesome
Anzer Ahmed (2 years ago)
this is it! thanks
KARIM K.I (2 years ago)
please the name of the font-family
KARIM K.I (2 years ago)
+Timothy Arterbury thank you
Timothy Arterbury (2 years ago)
The font is Proxima Nova. I got it from my Adobe TypeKit description.
KARIM K.I (2 years ago)
very good bro . very good .
Metro City Graphics (2 years ago)
Helped alot, thanks!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.