DEV Community

Thecodepedia
Thecodepedia

Posted on • Originally published at thecodepedia.com on

Making an Amazing Animated Button with HTML and CSS

Learn how to make an amazing animated button with HTML and CSS! This technique will work on any browser that supports HTML5 and CSS3.

So it’s good to know even if you don’t plan on making buttons! Let’s get started!

animated button with html and css

Step – The HTML and CSS

HTML is one of those foundational languages that everyone needs to know. HTML, or HyperText Markup Language, is basically what you see on a webpage: The text, links, images — everything. CSS is cascading style sheets in plain English. If your website looks professional (meaning it doesn’t look like a big mess), then it was probably made using CSS. So without further ado, here are three steps to making a great button using only HTMLand CSS!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Social media hover effect</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="menu">
        <div>share
          <span><i class="fas fa-share"></i></span>
        </div>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here are some steps to making a great button using only HTML and CSS! Here are three steps to making a great button using only HTML and CSS! Here are three steps to making a great button using only HTML and CSS!… etc. Make sure your Skip To Content button works properly.

Step 2 – Let’s add CSS!

You might notice that every animation that is created using HTML or CSS has a few key parts in common. The first thing we need to do is define what type of animation we’d like to create. In our case, let’s focus on creating a button that expands vertically when a user hovers over it. The next step involves defining each part of our animation. To achieve our desired outcome, we’ll have four separate boxes sitting next to one another: two for vertical borders and two for background colors.

Read more about: Top 10 amazing html css projects ideas

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
  }
  .container {
    height: 100vh;
    width: 100%;
    background-color: #bdc3c7;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu {
    background: #fff;
    display: flex;
    box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
  }
  .menu div {
    padding: 20px 40px;
    font-size: 30px;
    cursor: pointer;
    position: relative;
    transition: transform 0.5s;
  }
  .menu div span {
    position: absolute;
    color: #e74c3c;
    width: 100%;
    height: 100%;
    padding: 20px 70px;
    left: 0;
    top: 100%;
  }
  .menu div:hover {
    transform: translateY(-100%);
  }
Enter fullscreen mode Exit fullscreen mode

If you want more detailed instructions on how to animate your own buttons, check out Smashing Magazine’s excellent tutorial by Chris Spooner. Adding some movement!: With all of those boxes defined, our last step is adding a bit of movement. HTML5 provides us with plenty of new attributes and options, but nothing better than its custom data-* attributes (I know — a weird name). Instead of writing out each box by hand, we can use these customized data-* attributes to instantly create elements without having to write any code at all! This will keep things really clean and manageable as well as ensure that everything happens where we want it to happen.

Take your animations to a whole new level. With just a few tweaks, you can add animation effects that would be impossible with traditional static web development techniques. The great thing about keyframes is that they’re easy to apply to elements within your HTML: no special coding required! In fact, in most cases, you don’t even need to change your original code – but we’ll talk more about that later. To get started using keyframes, we first need to get familiar with some very useful values and terminology.

Let’s take a look at… Now that we’ve talked about what keyframes are, let’s see how we actually use them on our site or application. First of all, we want to choose a style of movement for our buttons so that they stand out as interactive objects rather than boring old images. One really cool technique is bounce easing (also called spring ease). For bounce ease, we create an elliptical envelope and animate it from one position to another on command by applying it to our desired element via CSS3 Keyframe animations. This effect makes buttons feel intuitively clickable and engaging—much better than simple linear transitions would do!

Final Result: Animated Button with HTML and CSS

Here is our amazing animated button. A lot of tutorials use javascript, we don’t! We are using pure html5 and css3 for its functionality to create a perfectly working button. I hope you found it useful! Please share your suggestions in the comments below if you want us to write something on a topic or a new tutorial 🙂 Enjoy!! 🙂

Conclusion

This way you can easily create an amazing animated button with HTML and CSS. Download source code from my Github account.

Download code

Discussion (0)