How to make Button CSS Hover Effect. Pure CSS Wavy Design. Html button.
Tags: html, css, javascript, webdev
Published: 2021-08-01 10:42:42

Hello, welcome. Today we'll see, how we can easily create an awesome wavy button hover effect with pure. We'll see how we can create pure css wavy curve design. 

To see demo or you want full coding tutorial video. You can watch the tutorial below.


#Video Tutorial

{% youtube 4_EYqNRCG_Q %}

So, without wasting more time let's see how to code this.

#Code

First, for this project we have 2 files `index.html` and `style.css`. Start by writing basic HTML structure. After that, create a button.

###index.html
```HTML
<button class="btn">
    button
</button
```
######Output
![Blog -1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylf7loj7fcnhqw328wbe.PNG)
Now, center this button and give dark background to body.

######Style.css
```CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0e0e0e;
}
``` 
######Output
![blog-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enzxhgyjl8cjw3f3kay2.PNG)

After this style button little bit.

######Style.css
```CSS
.btn{
    position: relative;
    width: 200px;
    height: 60px;
    font-size: 30px;
    text-transform: capitalize;
    font-family: 'roboto', sans-serif;
    letter-spacing: 2px;
    background-color: transparent;
    color: #fff;
    border: none;
    outline: none;
    overflow: hidden;
    cursor: pointer;
}
```
Make sure you give `overflow: hidden;`.

######Output
![blog -3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nasemblyqg21k3o8m606.PNG)

Now inside `index.html` inside our `button` element, create `span` element with class `wave`. Like this.

######index.html
```HTML
<button class="btn">
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    button
</button>
```
You can type anything inside `p` tag but make sure to type long text.

Give some style to it.

######stlye.css
```CSS
.wave{
    position: absolute;
    background: rgb(255, 46, 46);
    width: 100%;
    height: 80%;
    left: 0;
    bottom: 0%;
}
```

######Output
![blog -4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5qnlrvni3jq0jfdpv2u.PNG)

Well, this doesn't look like our effect. To make that effect, Style the `p` element also.

######Style.css
```CSS
.wave{
    // previous styles.
    transform: rotate(180deg);
}
.wave p{
    font-size: 60px;
    color: transparent;
    text-decoration-style: wavy;
    text-decoration-color: rgb(255, 46, 46);
    text-decoration-line: underline;
}
```

######Output
![blog-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6yvy8pt4sn2zqfprpyq.PNG)

Now, you can see we have something on top. Change  `span` element's `line-height` property little bit.

```CSS
.wave{
     // previous styles.
     line-height: 40px;
}
```
######Output
![blog-6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbgnqnptx5sc4n9o18iv.PNG)

We have wave now.If you didn't notice we created this wavy line with these properties.

```CSS
    text-decoration-style: wavy;
    text-decoration-color: rgb(255, 46, 46);
    text-decoration-line: underline;
``` 

As you can see on the output we have little gap between the wave. So to fix that create another `span` element with same class.

######index.html
```HTML
<button class="btn">
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    button
</button>
```
And change second wave's line height.

######style.css
```CSS
.wave:nth-child(2){
    line-height: 30px;
}
```

######Output
![blog-7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cupqidh86zv9ymntfeb4.PNG)

To make these `span` elements behind the button. Use `z-index`. And give `transition` also.

######style.css
```CSS
.wave{
     // previous styles.
     transition: bottom 1s;
     z-index: -1;
}
``` 

######Output
![blog-8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpf2ovhgf3289ralc44y.PNG)

Now make that wave animation.

######style.css
```CSS
.wave p{
    // previous styles
    animation: wave 1s linear infinite;
}

@keyframes wave{
    100%{
        margin-left: -50%;
    }
}
```

######Output
![Untitled design (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3emaicdkpkwiqjs7npdx.gif) 

Now we are almost done just change `wave` element's bottom value to `-100%` and set it to `0` on hover.

######style.css
```CSS
.wave{
    bottom: -100%; // set it negative 100%
}
.btn:hover .wave{
    bottom: 0;
}
```

######Output
![Untitled design (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlv2xkd0y9f8cllymyzb.gif) 

We are done.

So, that's it. I hope you understood each and everything. If you have doubt or I missed some thing let me know in the comments.

#Articles you may found Useful
1. [CSS Positions](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)
2. [CSS Media Query](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g)
3. [CSS flex box](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2)
4. [Infinte CSS loader](https://dev.to/kunaal438/quick-css-make-infinity-loading-animation-for-your-next-website-187k)
5. [Youtube Clone : Youtube API](https://dev.to/kunaal438/create-working-youtube-clone-with-search-box-youtube-api-2a6e)

If you like, you can subscribe my youtube channel. I create awesome web contents. [Subscribe](https://www.youtube.com/c/modern_web?sub_confirmation=1)

Thanks For reading.