CSS3 in 10 days — Day 1

Most of the time, we developers struggle with CSS and take the help of some CSS framework like bootstrap or foundation. Nothing wrong in using them, but then you start to struggle in CSS and when some CSS bug or issue comes, we tend to go to that person in our team who is good in CSS.

To master CSS, the best was is to use it. So, this tutorial contains some practical examples which you can learn and directly use in your projects. This series is inspired by this awesome youtube series in freecodecamp channel.

We will be using this simple html markup and will style it. So, go ahead and open your favorite editor and create a file index.html in it, with below content.

Next create an empty sandbox.css in the same directory. Let’s style the facebook style buttons first.

And now our index.html looks like below in browser.

Image for post
Image for post
facebook style buttons

Next we will add more styles to the first button.

Now, our dark button looks like below and have a hover and active state also.

Image for post
Image for post
facebook dark button

Now, let’s also add styles for the facebook light button.

And our light button looks like.

Image for post
Image for post
Facebook light

Now, we will style some cool 3d buttons. Will update the css as below.

Once we click on it the will sort of move down. This is because we have made the position:relative and on active, we have set top to 3px and left to -3px. It will move because of that.

Image for post
Image for post
3D button

Now, there is one thing missing in the above 3D button and that is , the edges of shadows are not matching with the button. We will do the same by creating a small triangle and moving, it to that spot. We will use the ::before and ::after to create those two triangle.

We will now see the proper button, with edges connected.

Image for post
Image for post
3D button final

Next, we will start the second 3D button, which will be a round button with push capabilities. Add the below code to our CSS.

Now, the button looks like.

Image for post
Image for post
CIrcle 3D

Now, we will add hover effect and active effect to our 3D circle.

Now, when you click on the circle button, the top 2px will come to play and in box-shadow, we have reduced two layers. So, it will show the pressed state.

Now, we will move to Gradient bordered buttons. We will start with the CSS for button 1.

Here, one of the important properties are the highlighted one. They are the property which makes the outline border in the button.

Image for post
Image for post
Gradient button

On hover we fill the button with the hover property.

Image for post
Image for post
Gradient button hover

Now, we will make the gradient button 2. It will be completely same as button 1.

And the button looks like below. The difference comes from the to right in border-image.

Image for post
Image for post
Gradient button 2

Also, on hovering we have set border-right-style: none, which results in below.

Image for post
Image for post
Gradient button 2 hover

Now, we will start with our animation buttons. Let’s start with button 1. In this we will be using a pattern image and when, we hover over the button, the pattern will move.

For the pattern to move, we are using the @keyframes from animation and moving the background.

Image for post
Image for post
Animation button 1

Now, we will do the animation button 2. We will be doing this animation without any keyframe animation.

But, with the help of opacity of an after element “»” set to 0.

Image for post
Image for post
Before hovering

And when we hover over the button, we shift some padding and make the opacity: 1 for element “»”.

Image for post
Image for post
Animated arrow

We will next make our toggle UI buttons. But if we look at our html, it is actually checkbox and we are transforming it to look like a button.

The CSS for the toggle button is below.

As evident from the above everything including the on and off are created from CSS.

Image for post
Image for post
Toggle Off
Image for post
Image for post
Toggle on

Last, we will create the toggle button 2. It will also be a checkbox.

The CSS for toggle button 2 will be below.

Here, we have a nice clickable button.

Image for post
Image for post
Clickable toggle button

On click of the button will change background.

Image for post
Image for post
Toggle button 2 changed.

This concludes Day-1 in which we learned to create different type of buttons. You can find the code for the above in this github link.

You can find Day-2 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store