How to create waves on button with CSS and HTML? Last Updated : 24 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The wave effect on a button is a type of effect in which the shape of the button turns into a wave on hovering. While there are other ways to create a wave effect, a simple method is to use the keyframe property. Approach: In order to animate the button, we use keyframe to gradually set the transitions at different stages. HTML Code: The HTML code is a simple structure that contains a wrapper where the span tag is wrapped inside the anchor tag. html <html> <head></head> <body> <div class="wrapper"> <a href="#" class="wave-btn"><span>wave</span></a> </div> </body> </html> CSS Code: For CSS, these are the following steps: Add basic styles like background color, position the button and set the width and height of the button.Use animation property with identifier named as wave .Now use keyframes to animate each frame according to their angle by using the transform property. css <style> @import url("https://fonts.googleapis.com/css?family=Noto+Sans"); * { position: relative; } html, body { margin: 0; padding: 0; height: 100%; } .wrapper { height: 100%; background-color: #f5f6fa; } .wave-btn { color: #fff; text-decoration: none; border: 3px solid #fff; padding: 5px 30px; font-size: 22px; font-weight: 600; font-family: "Noto Sans"; line-height: 52px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; transition: all 1s; } .wave-btn:before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 130px; background-color: #0097e6; top: 30px; left: 50%; transform: translate(-50%); animation: wave 5s infinite linear; transition: all 1s; } .wave-btn:hover:before { top: 15px; } @keyframes wave { 0% { transform: translate(-50%) rotate(-180deg); } 100% { transform: translate(-50%) rotate(360deg); } } </style> Complete Code: css <html> <head> <style> @import url("https://fonts.googleapis.com/css?family=Noto+Sans"); * { position: relative; } html, body { margin: 0; padding: 0; height: 100%; } .wrapper { height: 100%; background-color: #f5f6fa; } .wave-btn { color: #fff; text-decoration: none; border: 3px solid #fff; padding: 5px 30px; font-size: 22px; font-weight: 600; font-family: "Noto Sans"; line-height: 52px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; transition: all 1s; } .wave-btn:before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 130px; background-color: #0097e6; top: 30px; left: 50%; transform: translate(-50%); animation: wave 5s infinite linear; transition: all 1s; } .wave-btn:hover:before { top: 15px; } @keyframes wave { 0% { transform: translate(-50%) rotate(-180deg); } 100% { transform: translate(-50%) rotate(360deg); } } </style> </head> <body> <div class="wrapper"> <a href="#" class="wave-btn"><span>wave</span></a> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create Shaky button using HTML and CSS? A ashitace696 Follow Improve Article Tags : Web Technologies CSS CSS-Advanced Similar Reads How to create a shinny button using HTML and CSS ? Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read How to create Shaky button using HTML and CSS? To create a shaky button using HTML and CSS involves adding an animation effect to a button element, making it appear to shake when interacted with. This effect can be used to draw attention to buttons, such as a snooze button or a button requiring immediate action. ApproachHTML page structure is de 2 min read How to Create Custom Radio Button using HTML and CSS ? The simple radio button can be customized using HTML and CSS easily. We will use some CSS properties to create a custom radio button. The :after pseudo-element and checked attribute is used to set some CSS property. The complete code is divided into two sections, the first section contains the HTML 3 min read How to Create a Transparent Button using HTML and CSS? Transparent buttons are a popular design choice in modern web development, as they create a sleek and minimalist look. By using CSS, you can easily create buttons with fully transparent or semi-transparent backgrounds. This article uses the background-color: transparent; property to design the trans 2 min read How to Create Animated Loading Button using CSS? An animated loading button provides a visual cue during processing, often featuring a spinner or pulsing effect. To create one using CSS, style a button element, include a spinner inside, and use CSS animations (like keyframes) to animate the spinner on button activation.Table of ContentUsing Font A 3 min read Like