Illaf's button

About Illaf's button

Illaf's button is an animated CSS button by @Illaf. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Icon, Download, Animated

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />">
</head>
<body>
    <a href="#" class="btn">
        <div class="completed">
            <i class="fa-regular fa-circle-check"></i>
            <span>Completed</span>
           
        </div>
        <div class="download">
            <i class="fa-sharp fa-solid fa-download"></i>
            <span>Download</span>
           
        </div>
    </a>
    <script>
        const btn=document.querySelector('.btn')
        btn.addEventListener('click',()=>{
            btn.classList.add('active')
        })
    </script>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', Arial, sans-serif;
}
body
{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #222;
  min-height: 100vh;
}
.btn
{
  position: relative;
  width: 200px;
  height: 70px;
  background: #444;
  color: #999;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.8s;
  transition-delay: 0.5s;
  overflow: hidden;
}
.btn .fas
{
  margin-right: 8px;
}
.btn .download
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  transition: 0.3s;
}
.btn.active .download
{
  transform: translate(-50%,60px);
  animation: bottom_top 0.5s linear forwards;
  animation-delay: 12s;
}
.btn .completed
{
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%,-60px);
  white-space: nowrap;
  color: #222;
}
.btn.active .completed
{
  animation: top_bottom 1.3s linear forwards;
  animation-delay: 6.5s;
}
.btn.active
{
  width: 600px;
  height: 15px;
  animation: btn_width 4.5s linear forwards;
  animation-delay: 5s;
}
.btn.active::before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #5c5cff;
  animation: before_active 10s linear forwards;
  animation-delay: 1.5s;
}
.btn.active::after
{
  content: '\f00c';
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: "Font Awesome 5 Free";
  color: #222;
  transform: translate(-50%,-50%) scale(0);
  transition: 0.3s;
  animation: check_scale 2s linear forwards;
  animation-delay: 8.5s;
}
@keyframes before_active
{
  0%
  {
    width: 0%;
    height: 100%;
  }
  30%,95%
  {
    width: 100%;
    height: 100%;
  }
  100%
  {
    width: 100%;
    height: 0%;
  }
}
@keyframes btn_width
{
  0%
  {
    width: 600px;
    height: 15px;
  }
  20%,70%
  {
    width: 200px;
    height: 70px;
  }
  80%,90%
  {
    width: 100px;
    height: 100px;
  }
  100%
  {
    width: 200px;
    height: 70px;
  }
}
@keyframes top_bottom
{
  0%
  {
    transform: translate(-50%,-60px);
  }
  20%,90%
  {
    top: 50%;
    transform: translate(-50%,-50%);
  }
  100%
  {
    top: 120%;
    transform: translate(-50%,-50%);
  }
}
@keyframes bottom_top
{
  0%
  {
    transform: translate(-50%,60px);
  }
  100%
  {
    transform: translate(-50%,-50%);
  }
}
@keyframes check_scale
{
  0%
  {
    transform: translate(-50%,-50%) scale(0);
  }
  20%,90%
  {
    transform: translate(-50%,-50%) scale(1.3);
  }
  100%
  {
    transform: translate(-50%,100px) scale(1.3);
  }
}