Style Fancy Buttons: CSS Tutorial (Day 1 of CSS3 in 30 Days)

Learn how to style fancy buttons using CSS in this tutorial for beginners.

⭐️Files you need ⭐️

--

[nbishwokarma]

if you're having hard time understanding the triangles think of a transparent box with colorful borders. The box is now reduced to 0 width and 0 height. That way it forms four triangles. For arrow up and down triangles we set transparent left and right borders and for triangles facing left and right we set transparent top and bottom. Hope this helps

[gabe-the-bear]

Hi just being curious how much time does it take for you to prepare for this series? I tried to make something in CSS and JS and it always takes me almost four hours😫

[onwuasoanyageorge]

Thank you, Brad and FCC. Awesome work!

At 15:34, the reason why the 3D button is darker on the hover is that you're telling the browser(CSS code) to only show 30% of light on the colour selected with hsl method. When you reduce the light shown on an item it gets darker. The original .btn-3d-1 class presumedly sets the background colour at normal light of hsl (i.e 50%).

[jghagemann]

I'm pretty sure I learned something....and I'm also pretty sure I saw a lot of stuff that I have no idea how it works

[Kazerian]

This is something i was looking for. like an in-depth tut of css. Really awesome. thanks FCC and brad.

[mckibb_n]

Thanks for the resource. I keep forgetting hoe simple and effective css can get some days. and this is just the tip of the iceberg. Will come back for the month.

[ealvinoq]

Time 14:29, what did you do in photos hop?

[aabdille]

Thank you Hussey, this is very helpful and will follow thru the end.

[whynot-vqly]

this isn't something a for beginners, but I like it.
thanks for this great tutorial

[gabe-the-bear]

I find a problem that all the buttons with transition added are performing a transition from the default style to the style we apply when loading the page. I'm using Firefox 61 on Ubuntu 18.04

[ajibolaagbeniga]

nice video.. please i will like to download all the course files at once, how do i go about it?

[justkailash]

position- relative and display - inline_block ... is the necessary or just a good practice to add them always?

[stevenarmoo]

Why does the facebook-style-button have a blue border when it's selected... I can't see any rules for that

[solomongodwin]

thanks so much for this awesome video, , now i can sharpen my Css skills and build a responsive

[luiseduardodorantegimenez]

Holaaa una consulta, en el .btn-3d-1:active::before y .btn-3d-1:active::after no es mejor colocarle un display none para eliminar los pseudoelementos que estamos creando?

[davronbekteacher]

Thank you bro!!! Finally I have found the best tutorial!

[sourceblocks]

Hi Brad! Is this the same course you have on Udemy? Or does the one on Udemy offer something extra? Thanks!

[aleksandartrisic]

thanks a lot for the hard work, even tho i don`t understand everything, i still learn a lot :) btw isn't it better to check the box with a tick sign at the last example?

[mrcoder]

Amazing. The tutorial is for individuals that are not really expeirienced and beginners.

[shubhamstark]

I'm going to master CSS now, I've learned basics. Somebody please tell me is it anything and everything I can hope for? It seems they have explained in depth.