DEV Community

loading...
Cover image for How to make Button CSS Hover Effect. Pure CSS Wavy Design. Html button.

How to make Button CSS Hover Effect. Pure CSS Wavy Design. Html button.

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
・3 min read

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

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

<button class="btn">
    button
</button
Enter fullscreen mode Exit fullscreen mode
Output

Blog -1
Now, center this button and give dark background to body.

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

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0e0e0e;
}
Enter fullscreen mode Exit fullscreen mode
Output

blog-2

After this style button little bit.

Style.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;
}
Enter fullscreen mode Exit fullscreen mode

Make sure you give overflow: hidden;.

Output

blog -3

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

index.html
<button class="btn">
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    button
</button>
Enter fullscreen mode Exit fullscreen mode

You can type anything inside p tag but make sure to type long text.

Give some style to it.

stlye.css
.wave{
    position: absolute;
    background: rgb(255, 46, 46);
    width: 100%;
    height: 80%;
    left: 0;
    bottom: 0%;
}
Enter fullscreen mode Exit fullscreen mode
Output

blog -4

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

Style.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;
}
Enter fullscreen mode Exit fullscreen mode
Output

blog-5

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

.wave{
     // previous styles.
     line-height: 40px;
}
Enter fullscreen mode Exit fullscreen mode
Output

blog-6

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

    text-decoration-style: wavy;
    text-decoration-color: rgb(255, 46, 46);
    text-decoration-line: underline;
Enter fullscreen mode Exit fullscreen mode

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
<button class="btn">
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    button
</button>
Enter fullscreen mode Exit fullscreen mode

And change second wave's line height.

style.css
.wave:nth-child(2){
    line-height: 30px;
}
Enter fullscreen mode Exit fullscreen mode
Output

blog-7

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

style.css
.wave{
     // previous styles.
     transition: bottom 1s;
     z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode
Output

blog-8

Now make that wave animation.

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

@keyframes wave{
    100%{
        margin-left: -50%;
    }
}
Enter fullscreen mode Exit fullscreen mode
Output

Untitled design (2)

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

style.css
.wave{
    bottom: -100%; // set it negative 100%
}
.btn:hover .wave{
    bottom: 0;
}
Enter fullscreen mode Exit fullscreen mode
Output

Untitled design (1)

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
  2. CSS Media Query
  3. CSS flex box
  4. Infinte CSS loader
  5. Youtube Clone : Youtube API

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.

Discussion (10)

Collapse
shikkaba profile image
shikkaba

While this looks cool, it's not a great idea. Screen readers will see and read the row of a.

Collapse
jamesthomson profile image
James Thomson

This. At least use aria-hidden="true" on those elements or use pseudo-elements (but I believe even those sometimes can be interpreted by screen readers).

Collapse
kunaal438 profile image
Modern Web Author • Edited

Well then there is no issue if reader read this just instead of typing "aaaaa" type something meaningful like "wave_pattern" this design will still work

Thread Thread
jamesthomson profile image
James Thomson

No. Just no.

Try turning your screen reader on and navigate through some websites. Now imagine you rely on this assistive technology to navigate through various pages. Now imagine every single time you focus on a button and it reads out "WAVE UNDERSCORE PATTERN" "WAVE UNDERSCORE PATTERN" "BUTTON". Now imagine you have to tab through several of these to try and find the button you are hoping to find.

I hope you can imagine how incredibly frustrating this would be to users that rely on assistive technology.

Thread Thread
kunaal438 profile image
Modern Web Author

Yeah that could be very frustrating. But I made this effect only to show a way to do this with pure CSS. We can also use Image instead of using spans to create this effect and screen readers will ignore the image. I was just making this effect with pure CSS.

I hope you understand

Thread Thread
shikkaba profile image
shikkaba

Thing is, just because it can be done, doesn't mean it should. Accessibility is very important, and should be considered especially as on here there are people who do not know better and will just use code without knowing there is something flawed with that usage.

Thread Thread
kunaal438 profile image
Modern Web Author

Yeah I am sorry I didn't thought about readers as well. But after thinking for a solution. I think I have one. We can use CSS media query to check for readers and in case of readers we can change spans display property to none. As readers ignores the elements having display none property.

I hope you understand

Thread Thread
shikkaba profile image
shikkaba

That's a bit much. If you have to use media queries for a decorative item, then that is overcomplicating and adding unnecessary code for the sake of a visual effect that can be done another way not requiring text.

Consider something like what is used here: codepen.io/btargac/pen/JGOGoj

Collapse
the_riz profile image
Rich Winter

Using CSS transforms will improve the performance.

Collapse
kunaal438 profile image
Modern Web Author

I didn't knew about it but I'll definitely try this with transform property. Thanks