Skip to main content

Animated Button With Pressed Effect | HTML And CSS

Button-with-pressed-effect-HTML-And-CSS-Rustcode

In website user interface designing, we keep in mind the animation of the website elements because every developer wants to develop an attractive website with a special effect interface. As we know that every website needs to put some buttons on the user interface so that the user can take some action according to the requirement, so on those buttons, we can add some effect when user click or hover the button. In this article, we will learn how to add a pressed effect on a button click. This is pure css animation no javascript used. This animated button shows the 3D effect. When the button is active, it seems that the button is pressing. More effects can also be added on the button depending on your creativity. This is a simple button animation.

RELATED POST:
1. Responsive Side Navigation Bar Design | HTML And CSS
2. CSS Tooltip Text Animation | HTML And CSS

1. HTML DOCUMENT

Before starting writing code, we need to create a basic structure of an HTML document. Writing basic Structure is very important because the browser can easily understand document type and may start some process. The basic HTML structure looks as below.
<!DOCTYPE html>
<html>
<head>
  <title>Document Title</title>
  <style>
  </style>
</head>

<body> 
 Content of the document.

<script type="text/javascript">
</script>

</body>
</html>

2. HTML

After Writing the basic structure of the HTML document, you can write your required tags and content also, after that run this code on your browser and see the output. As we know that HTML only shows content in a basic format, it does not beautify that content. To beautify our content we need for CSS, which is inserted in an HTML document and it creates an attractive user interface.
<div>
  <h3>Animated 3D Button<br>With Pressed Effect</h3>
  <button>BUTTON</button>
</div>


3. CSS

Now, it's time to beautify our HTML content, so we need to add to CSS in our HTML file. CSS can be added to the HTML document in three ways, here we are using the internal CSS method. Write CSS which is shown below and see the output on your browser.
<style type="text/css">
  body{
   background-color: #000;
   font-family: Arial, Helvetica, sans-serif;
  }
  div{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   text-align: center;
   color: white;
  }
  button{
   background: #ff4500;
   text-align: center;
   cursor: pointer;
   border: 1px solid white;
   color: white;
   font-size: 24px;
   padding: 18px 42px;
   box-shadow: 2px 6px 2px #fff;
  }
  button:hover{
   background: #ff2000;
  }
  button:active{
   transform: translateY(4px);
   box-shadow: 0px 2px 1px #fff;
  }
</style>

4. Youtube VIDEO

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.



If this article is useful and informative for you, share it. And if you have any doubt, please leave a comment.

RELATED POST:

Comments