Buttons animation

Cool button hover effects CSS with source code

In this lesson, we will create Cool button hover effects CSS. Without using buttons no website can perform its functions. But if we use the hover effect over buttons then they look pretty much awesome. Today we are creating buttons with a hover effect with the help of Html and CSS for our website. In the last lecture, we have gone through how to create a Contact us form in Html. Today our concern is to create buttons with different hover effects. So, let’s get started.

Cool button hover effects CSS:

Button plays an important role in websites. It helps the users to move from one place to other. One page to other, one link to another, one section to other. A lot of things can be done using buttons.

So, HTML enables us to create a button using its tags. Then CSS enables us to add design and icons to buttons, JS enables us to add functionality to buttons and PHP helps us to store that information of buttons in the database.

Right now we have added a simple hover effect to our website buttons. By looking at the above discussion you can understand the importance of buttons and their development process as well.

In this way, buttons works on websites.

You can change the colour of the hover and buttons according to your website’s color. We are creating it using Html and CSS so, let’s get started.

How to create a Cool button hover effects CSS?

Html and CSS are front-end languages used for creating and designing different websites. Buttons are also part of the website and we will create them with the hover effect in Html and CSS.

Download a code editor for Cool button hover effects CSS:

Code editors are helpful. Some of them are:

Notepad ++

VS CODE(recommended)

Brackets

Html source code:

Buttons code is available below so, paste it there in your code editor.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cool Button - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <button class="btn btn1">Hover Me</button>

      <button class="btn btn2">Hover Me</button>

      <button class="btn btn3">Hover Me</button>

      <button class="btn btn4">Hover Me</button>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Cool Button - FantacyDesigns</title>

</head>

<body>

<button class="btn btn1">Hover Me</button>

<button class="btn btn2">Hover Me</button>

<button class="btn btn3">Hover Me</button>

<button class="btn btn4">Hover Me</button>

</div>

</body>

</html>

CSS source code:

body{
  margin: 0;
  padding: 0;
background:#FF8066;
}

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btn{
  width: 220px;
  height: 50px;
  background:#FCF7FF;
  margin: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #FF8066;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  transition: 0.4s;
  transform-style: preserve-3d;
  perspective: 1000px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.btn:hover{
    box-shadow: none;

}

.btn::after{
  content: '';
  position: absolute;
  background: #FF4545;
  transition: 0.4s;

}

.btn1:hover{
  transform: rotateX(-20deg);
}
.btn1:after{
  width: 100%;
  height: 24px;
  top: -24px;
  left: 0;
  transform-origin: 0 100%;
  transform: rotateX(90deg);
}

.btn2:hover{
  transform: rotateX(20deg);
}
.btn2:after{
  width: 100%;
  height: 24px;
  top: 100%;
  left: 0;
  transform-origin: 0 0;
  transform: rotateX(-90deg);
}

.btn3:hover{
  transform: rotateY(20deg);
}

.btn3::after{
  width: 30px;
  height: 100%;
  left: -30px;
  top: 0;
  transform-origin: 100% 0;
  transform: rotateY(-90deg);
}

.btn4:hover{
  transform: rotateY(-20deg);
}

.btn4::after{
  width: 30px;
  height: 100%;
  left: 100%;
  top: 0;
  transform-origin: 0 0;
  transform: rotateY(90deg);
}

body{

margin: 0;

padding: 0;

background:#FF8066;

}

.container{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.btn{

width: 220px;

height: 50px;

background:#FCF7FF;

margin: 40px;

border: none;

outline: none;

cursor: pointer;

color: #FF8066;

font-family: "montserrat",sans-serif;

text-transform: uppercase;

font-size: 16px;

transition: 0.4s;

transform-style: preserve-3d;

perspective: 1000px;

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

.btn:hover{

box-shadow: none;

}

.btn::after{

content: '';

position: absolute;

background: #FF4545;

transition: 0.4s;

}

.btn1:hover{

transform: rotateX(-20deg);

}

.btn1:after{

width: 100%;

height: 24px;

top: -24px;

left: 0;

transform-origin: 0 100%;

transform: rotateX(90deg);

}

.btn2:hover{

transform: rotateX(20deg);

}

.btn2:after{

width: 100%;

height: 24px;

top: 100%;

left: 0;

transform-origin: 0 0;

transform: rotateX(-90deg);

}

.btn3:hover{

transform: rotateY(20deg);

}

.btn3::after{

width: 30px;

height: 100%;

left: -30px;

top: 0;

transform-origin: 100% 0;

transform: rotateY(-90deg);

}

.btn4:hover{

transform: rotateY(-20deg);

}

.btn4::after{

width: 30px;

height: 100%;

left: 100%;

top: 0;

transform-origin: 0 0;

transform: rotateY(90deg);

}

Download source code:

Some users or beginners are unable to copy-paste or unable in linking the files with each other. For those, we have created a .zip and it will help them to get ready files with code in a folder. Its link is given below.

Task:

You have gone through the buttons hover effect process. Now modify these buttons. Change the background of the buttons. Then fill the buttons with any color and add borders as well. So, add one icon in each button as well.

If you like this post or if this was helpful for you then you can follow us. As a result, we will share premium templates with you for free. We are also available on different social media accounts, you can also follow us there.

Thanks for reading this article.

Download Source Code