CSS Button with Clicking Animation effect Tutorial and Code

2 Oct, 2022

Making a simple UI design of Clickable Button using HTML and CSS. Follow the Step by Step guide or Watch YouTube Video for Code.

Step 1: Create an button.html file and write basic HTML5 blocks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0" />
    <title>Button Design</title>
    
  </head>
  <body>
  
  </body>
</html>

Step 2: Writing variables for CSS Color

<!--Paste in Style CSS -->
:root{
  --c-shadow:rgb(194,194,245);
  --c-border:rgb(157,157,197);
  --c-color:rgb(50,50,117);
}

Step 3: Now, write a div for 'box' and create button tag

<div class="box">
    <button>LEARN</button>
</div>

Step 4: Finally, Write a CSS button Design Code and for personal touch to the Design.

.box{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2em;
}
button{
  font-size: 1rem;
  color: var(--c-color);
  font-weight: bold;
  padding: .5em 1.5em;
  cursor: pointer;
  border-radius: 12px;
  border: 3px solid var(--c-border);
  box-shadow: 0px .3em 0 0 var(--c-shadow);
  transition: transform 150ms linear, box-shadow 150ms linear ;
}
button:hover{
  box-shadow: 0 .15em 0 0 var(--c-shadow);
  transform: translate(0, 0.15em);
}
button:active{
  box-shadow: 0 0em 0 0 var(--c-shadow);
  transform: translate(0, 0.3em);
}

Done!

Pro Tips: You can change the Color of button simpally by Changing Variable Color on the root Section.

Follow for more tutorials like this on Instagram & YouTube.

Blog

Step 1: Create an button.html file and write basic HTML5 blocks.

Step 2: Writing variables for CSS Color

Step 3: Now, write a div for 'box' and create button tag

Step 4: Finally, Write a CSS button Design Code and for personal touch to the Design.

0 Replies so far - Add your comment