DEV Community

loading...

Animate Button text using only CSS

Rahul Nayak
Web dev in making
Originally published at rahuln.hashnode.dev ・3 min read

Hello, Hola and Namaste!

Today we are going to achieve what you see below:

deepin-screen-recorder_Select area_20201226113539.gif

Basically, we would animate the button text to smoothly slide up and down and show a different text when one hovers over it.

Without further ado, let's dive in.

Step 1: Add the html structure

Needless to say that we would need two different text values for button.

The primary text(New Blog) would hold the current information while the hidden text(Read it now!) would hold the value shown on button hover.

Here is the code so far:

<div class="btn blog-button">
  <div class="primary text">New Blog</div>
  <div class="secondary text">Read it now!</div>
</div>
Enter fullscreen mode Exit fullscreen mode

.btn {
  width: 200px;
  height: 50px;
  background-color: #0fabbc;
  border-radius: 25px;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  font-family: "Lucida Console", "Courier New", monospace;
}

Enter fullscreen mode Exit fullscreen mode

Screenshot from 2020-12-25 21-28-52.png

Step 2: Initial state (No Hover)

Right now both the text values are stacked against each other in the tiny button box. Let us use the position property to separate them.

.btn {
  width: 180px;
  height: 45px;
  background-color: #0d7377;
  border-radius: 25px;
  position: relative;
}

.text {
  width: 180px;
  height: 45px;
  position: absolute;
}

.primary {
  top: 0px;
}

.secondary {
  top: 80px;
}
Enter fullscreen mode Exit fullscreen mode

Screenshot from 2020-12-25 21-30-05.png

When you use position: absolute;, it positions itself relative to the nearest positioned parent. If you look at the above code and the image, we gave the .btn the position of relative and positioned the children divs absolute.

So now whenever you try to change the position of the children elements(.secondary and .primary), they would move with respect to the .btn div and not body.

### Step 3: Hover state

If you look at the code above, you'd notice that we have given the .secondary class a top value of 80px. That's our button text to be displayed on hover. When one hover over the button, the top property should be 0 so it sits inside the button box.

Similarly at this point, we want the existing text("New Blog") to clear space for the secondary text so we would move it up by setting the top to -80px. Let's see it in action.

.btn:hover .primary {
  top:-80px
}

.btn:hover .secondary {
  top:0px
}
Enter fullscreen mode Exit fullscreen mode

deepin-screen-recorder_Select area_20201225205114.gif

Here's the complete code used so far for your reference. But wait, isn't something missing here?

Ohh yeah, the transition doesn't look very smooth. Plus why the other text is still visible. Let's fix it.

Step 4: Sprinkle some animation here and there

Right now, the sliding up and down behaviour is instant. Let's use the CSS transition property to control the speed of this slide up/down behaviour.

Additionally, time to get rid of the unwanted text. We only want to show whatever text is inside the button box with the .btn class and so we would use overflow:hidden to hide that text. Let's see it in action:

.btn {
  overflow:hidden;
}

.text {
  transition: top 0.7s;
  -moz-transition: top 0.7s; // Firefox
  -webkit-transition: top 0.7s; // Safari and Chrome 
  -o-transition: top 0.7s; // Opera 
  -ms-transition: top 0.7s; // Explorer
}
Enter fullscreen mode Exit fullscreen mode

deepin-screen-recorder_Select area_20201226113539.gif

The above code snippet is simplified to only show the code relevant to this section. You can find the final code here for all the css styling that I have used.

This brings me to the end of this article. I enjoyed animating this button and writing about it. I hope this brings the same joy to you when you read and try it on your website.

My comment section is open to your feedback. If you want to chat over twitter, you can find me here.

Concluding this article with the usual request: Like, share and comment. It would mean a lot to me. 🙂🙂

Until Next time!

Discussion (2)

Collapse
liamedwards profile image
Liam Edwards

You could go one step further and apply animations when the button has been pressed by using :focus.

.btn:focus {
  animation: 2s ease 0s infinite button-press;
  outline: 0;
}

@keyframes button-press {
  0% {
    background-color: #0d7377;
  }
  50% {
    background-color: #06393b;
  }
  100% {
    background-color: #0d7377;
  }
}
Enter fullscreen mode Exit fullscreen mode

An infinite pulse is probably not good in practice though.

Collapse
pragyes31 profile image
Rahul Nayak Author

Thanks. Keyframes is my next topic to learn in css animation. Will implement this soon.
Thanks for reading. 🙂