WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sxrgxx</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button class="button" data-text="Awesome"> <span class="actual-text"> WEBLEB </span> <span aria-hidden="true" class="hover-text"> WEBLEB </span> </button> </body> </html>
body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #111; } .button { margin: 0; height: auto; background: transparent; padding: 0; border: none; } .button { --border-right: 6px; --text-stroke-color: rgba(71, 84, 159, 0.6); --animation-color: #c18afbaa; --fs-size: 2em; letter-spacing: 3px; text-decoration: none; font-size: var(--fs-size); font-family: "Arial"; position: relative; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--text-stroke-color); } .hover-text { position: absolute; box-sizing: border-box; content: attr(data-text); color: var(--animation-color); width: 0%; inset: 0; border-right: var(--border-right) solid var(--animation-color); overflow: hidden; transition: 0.5s; -webkit-text-stroke: 1px var(--animation-color); } .button:hover .hover-text { width: 100%; filter: drop-shadow(0 5px 23px var(--animation-color)) }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sxrgxx</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button class="button" data-text="Awesome"> <span class="actual-text"> WEBLEB </span> <span aria-hidden="true" class="hover-text"> WEBLEB </span> </button> </body> </html>
body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #111; } .button { margin: 0; height: auto; background: transparent; padding: 0; border: none; } .button { --border-right: 6px; --text-stroke-color: rgba(71, 84, 159, 0.6); --animation-color: #c18afbaa; --fs-size: 2em; letter-spacing: 3px; text-decoration: none; font-size: var(--fs-size); font-family: "Arial"; position: relative; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--text-stroke-color); } .hover-text { position: absolute; box-sizing: border-box; content: attr(data-text); color: var(--animation-color); width: 0%; inset: 0; border-right: var(--border-right) solid var(--animation-color); overflow: hidden; transition: 0.5s; -webkit-text-stroke: 1px var(--animation-color); } .button:hover .hover-text { width: 100%; filter: drop-shadow(0 5px 23px var(--animation-color)) }
/* Replace with your JS Code (Leave empty if not needed) */