CSS Buttons & Hover Animation Tutorial | HTML & CSS

Learn how to create a few simple CSS based buttons. We'll create the hover state as well as active (current) selected state. Finish off the tutorial with adding some animation via the CSS transition property for a little bit of movement. With just a couple of CSS classes, we can create several color or style variants of the buttons too!
SUBSCRIBE!:
kzbin.info...
Download the files:
github.com/wilsmex/edu/tree/m...
Eric's Codepen Inspiration:
codepen.io/EricPorter/pen/jcGAL

[@FollowAndrew]

Who doesn't love NOT slicing out images in Photoshop?! See the Menu Tutorial: kzbin.info/www/bejne/qZvVoWR8eq2hr6M

[@GerritforBazeja]

Super nice! you are a miracle on CSS. I am a little bit jealous. I can follow you but not make it myself. So by following I hope to learn a lot on my 61 year of age, building a website for my son!

[@ignacioarmandugon2916]

Thanks for the video

[@FollowAndrew]

You bet

[@hiwayshoes]

Hi Andrew, I’m kind of new to much of the basics, so I appreciate your tutorials and your helpful teaching style. I haven’t had time yet to research your channel but if you have or plan to do videos on working with images, I would really like to know more about that. More specifically, I want to be able to use my own images on the web, but I struggle to know what dimensions to resize them to. Many videos on the subject simply rely on online sources to gather their images: pexels, unsplash, etc. and that leaves image sizing a topic not explored. I would like to take images from my iPhone X, which of course are huuuge, and resize them properly. I’ve been using GIMP for resizing my images. But I’m just not sure what they should be sized to. At any rate, I like your channel and teaching style. Looking forward to more of your content, and I’ll be sure to have a look at your channel soon... Cheers!

[@FollowAndrew]

Gimp works great for resizing, on a Mac you can also use "Preview" for resizing. For the web, anything around say 1000px wide is typically sufficient, but the sizes really vary quite a bit based on the use case of the images. Proper image optimization depends on the type of photo and it's use case, and is a bit complicated (with which file type to use an all). Perhaps I'll do a video on that in the future.

[@DKTProductions2011]

Good day, how do you link an external website to a background image

[@DKTProductions2011]

[@GerritforBazeja]

changed my profile from Sambaschool to Gerrit for Bazeja