Today we’re making a quick and easy button in HTML and CSS. We will look at some cool transitions that we can code to happen when we hover over the button!

If you are a beginner to coding, check out our FREE 30-minute beginners course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file.

The code that visitors to your website will see goes in the body of the HTML. As such, in the body tag, let’s create a button!

We can do that using the button identifier. Give the button a class. A class is something you give to an HTML element that you know you’ll want to style or do something with later. In this case, label the class “button” and name it “I am a button!”. Your line should read: <button class=”button”>I am a button!</button>.

If you go to the Output tab, you will see the button “I am a button!” with built-in styling from HTML.

You can click on the button, but it doesn’t do anything at the moment. Jump over to the CSS tab. In that file, select the button we just defined. You can do that by calling the class name we gave it. Remember that we gave it the name “button”.

To call classes in CSS, we use the following format:

.button{
}

It’s a good idea to give classes names that are descriptive to what the classes are.

Next we will do a couple of things that will change the styling of the button. The first thing we’ll learn how to do is make rounded edges for our button. In CSS, we use border-radius to achieve this. To see an example, edit your code so it looks like the following:

.button{
border-radius: 50%;
}

Instead of 50%, you can use pixels to set the roundness of your button, such as:

.button{
border-radius: 4px;
}

You will notice a shadow around the button. To delete this, write border: none;.

.button{
border-radius: 4px;
border: none;
}

Here you can also resize the button. If you resize its font, the button will expand to fit the font. The following code shows how to change the font size.

.button{
border-radius: 4px;
border: none;
font-size: 20px;
}

Another button characteristic we can adjust is padding, which refers to the space between the text and the border of the button. For instance, we can have 10 pixels like so:

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;
}

Next we can adjust the width of the button. For instance, we can make the button’s width 200 pixels by coding the following:

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;

width: 200px;
}

We can adjust the height in a similar manner. Now, when you hover over the button, it still doesn’t do anything. To modify how the button looks when you hover over it, you can use a pseudo-selector. To call a pseudo-selector, first again call the class you put onto the button earlier on a new line. Then specify hover.

.button:hover{

}

Within the curly brackets, we can code for something to happen when you hover over the button. One thing we can do is change the background color of the button:

.button:hover{
background-color: lightblue;
}

When you hover your mouse over the button, the gray inside of it changes to light blue. When you move your mouse away, the button’s color goes back to gray.

Another thing we can do is change the button’s size. For this, you can use transform in CSS. You can call several attributes on this. For instance, scale changes the button size based on the number you input. For instance, to make the button 80 percent of its original size, write:

.button:hover{
background-color: lightblue;
transform:scale(0.8)
}

If you don’t want the button to jump in size when you hover over it, you can smooth out the transition. To do so, add a transition in the initial button class.

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;

width: 200px;
transition: all 1s;
}

This means that all transitions will take one second. You can make the transition slower with 5s, or faster with .1s. A smooth standard to go with is 0.5 seconds.

Now you can change how a button looks when hovered over! Feel free to experiment with the transitions and designs of your button. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes