How to give space between two buttons in CSS?

There are several methods that we can use to put spacing between two buttons. But the easiest way to achieve this is by using the margin property.

You can either apply margin-right on the first button or margin-left on the second button. Both ways you can achieve the same task.

Here is a working example:

Example:

.btn1{
   margin-right: 50px;
}

How to remove a border in CSS?

We often need to remove the existing border from an element. For example, the default HTML button has a default grey color border. We may sometimes have a requirment where we don’t want any border around the button.

To remove any such existing border from the element, we have to set its border property to none value. It will completely remove any existing border from the element.

Here is a working example of it:

Example:

button{
   border: none;
}

Remove individual side border from the element

You may sometimes want to remove only one side of border from the element and keep the other sides of border as it is. In that situation, you have to set only that particular side of border to none value.

Here is a working example:

Example:

button{
   border-left: none;
}

How to show and hide a div with transition in CSS?

Hide
Show

In modern websites, we often need to show and hide a div or any other element based on user interaction. But, showing or hiding any element instantly doesn’t make a good impact on visitors’ overall experience. It may be a popup, button, or any other element.

So instead of showing or hiding instantly, we show or hide the element with a transition. In other words, the element should be gradually visible or hidden.

In CSS, to show and hide a div with transition, we use the animation property along with the opacity property.

Here is a working example to hide the div with a transition:

Example:

div{
    width: 250px;
    height: 100px;
    background: yellow;
    border: 2px dashed blue;
    font-size: 20px;
    text-align: center;
    animation: hideMe 2s forwards;
}
@keyframes hideMe{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

Explanation:

To define an animation the very first thing we need is a keyframe rule. A keyframe rule specifies what to do with the element at different points during the animation. Therefore, we have defined a keyframe rule named ‘hideMe’.

In our example, at the starting we want the div to become fully visible. Therefore, at 0%, we have put opacity:1;. At the end of the animation, we want the div to become completely hidden therefore, at 100%, we have put opacity:0;.

Once this keyframe is defined, we can use it with the animation property.

Note: If you want the animation to play again and again, you can replace forwards with infinite.


Show the div with a transition

In the last example, we learned how to hide a div with transition. In the similar way, we can show a div with transition.

Here, we want the the div element to be hidden at the beginnin and then gradually visible. To do that, we have to just reverse the keyframe.

Now at the beginning we want the div to become fully hidden, therefore at 0% we have to put opacity:0; and at 100% we have to put opacity:1;.

Here is a working example to show the div with a transition:

Example:

div{
    width: 250px;
    height: 100px;
    background: yellow;
    border: 2px dashed blue;
    font-size: 20px;
    text-align: center;
    opacity: 0;
    animation: showMe 3s forwards;
}
@keyframes showMe{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

How to hide a div after 5 seconds in CSS?

With CSS, it is quite easy to hide a div element after 5 seconds or any other time period.

To do this, we have to take help of the animation property. To set an animation, we have to first define a keyframe rule, which decides what to do with the element during different points of animation.

In our case, we want the div element to be visible for 5 seconds and after that is should be hidden. Once the keyframe is defined, we can use it with the animation property which will be played for 5 seconds.

To show and hide the div we are using the opacity property. An opacity:1; means fully visible and opacity:0; means completely hidden.

Here is a working example of it:

Example:

div{
    width: 250px;
    height: 100px;
    background: yellow;
    border: 2px dashed blue;
    font-size: 20px;
    text-align: center;
    animation: hideMe 5s forwards;
}
@keyframes hideMe{
    0%{
        opacity: 1;
    }
    99.99%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

Here, we have defined a keyframe named ‘hideMe’, which keeps the div visible until the animation is reached 99.99%. As soon as the animation reaches 99.99% or in other words 5 seconds completes, the div element becomes hidden.


How to rotate a div 90 degrees in CSS?

0 deg
90 deg

With CSS, it is quite easy to rotate elements. To rotate elements in CSS, we take help of the transform property, which accepts several built-in functions to rotate elements in both 2D and 3D.

To rotate elements in 2D we use the rotate() function. It accepts both positive and negative values along with a keyword deg. So, if you want to rotate an element by 90 degrees, you have to use transform: rotate(90deg).

Here is a working example of it:

Example:

.div1{
    transform: rotate(0deg);
}
.div2{
    transform: rotate(90deg);
}

Rotate a div 90 degrees around bottom-right corner

0 deg
90 deg

In the previous example, we saw how to rotate a div by 90 degrees. That div by default was rotated around its center. But you may sometimes want to rotate it around any corner, not around the center.

Well, that is exactly what we have done here. We are rotating the div around its bottom-right corner.

To set the point around which the element should rotate, we use the transform-origin property. So, if we want to rotate the div 90 degrees around its bottom-right corner, we have to use transform-origin: bottom right; along with transform: rotate(90deg);

Here is a working example of it:

Example:

.div1{
    transform: rotate(90deg);
    transform-origin: center;
}
.div2{
    transform: rotate(90deg);
    transform-origin: bottom right;
}

Rotate a div 90 degrees with animation

If you are wondering how we have created above rotation animation, don’t panic, It’s quite easy. You can also create such animations.

CSS has the animation property which helps us create animations very easily. This animation property works with CSS @keyframes rule to create animation.

The @keyframe rule defines what we want to do with the element at various points during the animation.

Here is a working example:

Example:

div{
    width: 140px;
    height: 100px;
    background: yellow;
    border: 2px dashed rgba(0,0,0,0.8);
    text-align: center;
    font-size: 20px;
    margin-top: 50px;
    animation: rotate 6s infinite;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(90deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

Here, we have defined a keyframe named ‘rotate’ which starts the div rotation at 0 degrees. Once the animation reaches 50%, the div completes its 90 degrees rotation and when it finishes(100%), the div again comes back to its original state(0 degrees rotation).

This ‘rotate’ keyframe name we have used in the animation property as animation: rotate 6s infinite; , where, ‘rotate’ is the keyframe we have defined, 6s is the animation duration and inifinite is the number which decideds how many times the animation should repeat.


How to increase the checkbox size in CSS?

We often need to increase the size of the checkbox as the default checkbox is very small in size. With CSS it is pretty easy to increase or decrease the size of a checkbox.

The easiest way to increase the size of the checkbox is by using CSS width and height properties. Using these two properties we can easily set any custom width and height of the checkbox.

Here is a live example:

Example:

input.ch1{
   width: 20px;
   height: 20px;
}
input.ch2{
   width: 30px;
   height: 30px;
}
input.ch3{
   width: 40px;
   height: 40px;
}
input.ch4{
   width: 50px;
   height: 50px;
}

How to change button color on hover in CSS?

To change the button color on hover(mouse over), we can take help of the :hover pseudo-class. A pseudo-class is applied to an element only when the user interacts with it such as hovering, clicking, etc.

In the example below, the button color changes from red to grey when the user hovers over it:

Example:

button{
   background-color: red;
}
button:hover{
   background-color: grey;
}

Change button opacity on hover

Just like changing the background color on hover, we can apply any other CSS property when the user hovers over the button. One simple use case is changing the opacity of the button when the user hovers over the button.

Here is a working example of it:

Example:

button{
   opacity: 1;
}
button:hover{
   opacity: 0.7;
}

In this example, the button opacity changes from 1(default) to 0.7 when the user mouse over it.

How to change button color on click in CSS?

To change the button color on click, we can take help of the :active pseudo-class. A pseudo-class is applied to an element only when the user interacts with it such as hovering, clicking, etc.

In the example below, the button color changes from red to grey when the user clicks on it:

Example:

button{
   background-color: red;
}
button:active{ 
   background-color: grey;
}

Note: A pseudo-class is only applicable to an element when the user is interacting with it. Once the user interaction ends, the pseudo-class is removed from the element and it retains its original state.

How to change button color in CSS?

The default HTML button doesn’t look good because of poor styling and dull background color.

However, you can easily get rid of the default button styling and color.

To change the color of a button, we use the background-color property.

Here is a working example:

Example:

button{
   background-color: red;
}

How to center an image in CSS?

One of the most common problems that developers generally face while working with images is their alignment and positioning in the layout.

In this tutorial, we will discuss some of the easy methods that can be very helpful to center an image both horizontally as well as vertically. So let’s get started:


Center an image using text-align property

This is the easiest method to center an image. All you need to do is put the <img> tag inside a <div> element and apply text-align: center; property on the parent <div> element. It will automatically center the image.

Here is a working example:

Example:

div{
   text-align: center;
}

Center an image using margin: auto

We can also center an image horizontally using margin: auto;. However, if you directly apply margin: auto; on the <img> element, it won’t work. This is because <img> is an inline-level element and applying maring: auto; on such elements have no effect.

Therefore, we have to apply display: block; property as well while appying margin: auto; on the <img> element. This will automatically center it horizontally.

Here is a working example:

Example:

img{
   display: block;
   margin: auto;
}

Note: It is necessary to set a fixed width of the element if you want to center align it using margin: auto;, otherwise margin: auto; have no effect on the element.


Center an image using CSS flexbox

CSS flexbox can also help us to center an image both horizontally as well as vertically.

To horizontally center an image, first put the <img> element inside a div element and then apply display: flex; property on this div element. This will make the div element a flex container.

Once it’s done set justify-content: center; property on the div element. This will center the image inside the div element horizontally.

Here is a working example:

Example:

div{
   display: flex;
   justify-content: center;
   border: 2px solid red;
   padding: 10px;
}

Center an image horizontally and vertically using CSS flexbox

In the previous example, we saw how to center an image horizontally.

If you want to center it vertically as well, use align-items: center; on the same parent div element.

Here is an example:

Example:

div{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 350px;
   border: 2px solid red;
   padding: 10px;
}

Related Properties

You can read more about all the properties used in this article here: