Animate Button text using only CSS
Tags: css, webdev, beginners, animation
Published: 2021-04-11 19:33:16

Hello, Hola and Namaste!

Today we are going to achieve what you see below:

![deepin-screen-recorder_Select area_20201226113539.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1608963039573/bjdKJE7PT.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](https://codepen.io/pragyesh31/pen/PoGONVb)  so far:

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

.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;
}

```

![Screenshot from 2020-12-25 21-28-52.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608911982787/-AJ5ceAhG.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;
}
```

![Screenshot from 2020-12-25 21-30-05.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608912040413/jaYo3JY9C.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
}
```

![deepin-screen-recorder_Select area_20201225205114.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1608909711163/aN-9ccwsF.gif)

Here's the complete [code](https://codepen.io/pragyesh31/pen/KKgyzvv)  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
}
```

![deepin-screen-recorder_Select area_20201226113539.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1608963039573/bjdKJE7PT.gif)

The above code snippet is simplified to only show the code relevant to this section. You can find the final code  [here](https://codepen.io/pragyesh31/pen/KKgyZPL)  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](https://twitter.com/rhlnyk). 

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

Until Next time!