Animations, Buttons animation

Buttons in CSS with different styles and source code

In this lesson, we will create Buttons in CSS. In the last post, we discussed how to create a Profile card HTML css template. CSS. Today our main focus is to create the buttons for our website. So, let us get started.

Buttons in CSS:

Buttons are the main component of the website. They work on the basis of links. In the backend, we insert the links and when anyone clicks on that button then it redirects them to that link. Link can be within the website, any page or section of the website. So, buttons work on the basis of the links. It can be of different styles. We have also created buttons of different types.

As you can see in the image we have created buttons of different colours and styles. These buttons are different in colour and hover effect. We have created four buttons in a single frame so that we can provide a different idea of the colour and hover. These buttons have different gradient colours and different hover colours from each other. Gradient colour means the combination of more than one colour in different sections of the website.

How to create buttons in CSS?

It is simple to create buttons from scratch for the website.

Download a code editor for buttons in CSS:

It is so simple to download and install any IDE for writing the code of Html and CSS for buttons of the website. Code editor helps us to write the code with suggestions and accuracy.

Source code of Html:

We must use Html in our project to create buttons because it helps to write buttons content without design and responsiveness. The button code of Html is given below, so paste this code into your IDE.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">

      <button class="btn btn3">Hover me</button>
      <button class="btn btn2">Hover me</button>
      <button class="btn btn4">Hover me</button>
      <button class="btn btn1">Hover me</button>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

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

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

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

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

</div>

</body>

</html>

Source code of CSS:

We will use CSS for designing our buttons in different shapes and colours. It is also used to make the buttons responsive. Gradient colours and shapes are defined with the help of CSS. Use this code to design your buttons effectively.

body{
  margin: 0;
  padding: 0;
  background: #f1f1f1;
 background: #ddd;
}

.container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.btn{
  border: none;
  margin: 20px;
  padding: 24px;
  width: 220px;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background-size: 200%;
  transition: 0.6s;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.btn1{
  background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.btn2{
  background-image: linear-gradient(to left,#C4E538,#009432,#C4E538);
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.btn3{
  background-image: linear-gradient(to left,#12CBC4,#0652DD,#12CBC4);
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.btn4{
  background-image: linear-gradient(to left,#FDA7DF,#9980FA,#FDA7DF);
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.btn:hover{
  background-position: right;
}

body{

margin: 0;

padding: 0;

background: #f1f1f1;

background: #ddd;

}

.container{

position: absolute;

left: 50%;

top: 50%;

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

text-align: center;

}

.btn{

border: none;

margin: 20px;

padding: 24px;

width: 220px;

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

text-transform: uppercase;

border-radius: 6px;

cursor: pointer;

color: #fff;

background-size: 200%;

transition: 0.6s;

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.btn1{

box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.btn2{

box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.btn3{

box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.btn4{

box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.btn:hover{

background-position: right;

}

In this way, you can create buttons for your website using Html and CSS and these buttons are totally responsive.

Download source code:

Sometimes users don’t know how to link files with each other and how to do other things. So, for those users, we have created a .zip and it is very helpful for them to get the code from ready files. The source code is given below, so press the download button and you have your files for free.

Task:

As you know we assign tasks related to each post at the end of the post. Today’s task is to gain style for these buttons and make the efficient. We have four buttons and they are arranged using a grid. Now add four more buttons in the form of columns, not in the form of rows. Then we provided the gradient color to these buttons. Now change the color of each button and provide a new gradient color to these buttons. This is your task.

I hope this post is very much helpful for all the users and followers. If you have not followed us then don’t waste further time because we are sharing premium templates for free to our followers.

Thanks for reading this post.

Go to top

Download Source CodeClick to Download