WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2071
Andev.web
Im Editor öffnen
Veröffentlichen Sie Ihren Code
10 June 2025
Ein Code von Mete
HTML
Copy
Andev Web
Button
Button
Button
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #151F28; flex-direction: column; gap: 50px; } a{ position: relative; background: #fff; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.1em; font-weight: 400; padding: 10px 30px; transition: 0.5s; } a:hover{ background: var(--clr); color: var(--clr); letter-spacing: 0.25em; box-shadow: 0 0 35px var(--clr); } a::before{ content: ''; position: absolute; inset: 2px; background: #151F28; } a span{ position: relative; z-index: 1; } a i{ position: absolute; inset: 0; display: block; } a i::before{ content: ''; position: absolute; top: 0; left: 80%; width: 10px; height: 4px; background: #151F28; transform: translateX(-50%) skewX(325deg); transition: 0.5s; } a:hover i::before{ width: 20px; left: 20%; } a i::after{ content: ''; position: absolute; bottom: 0; left: 20%; width: 10px; height: 4px; background: #151F28; transform: translateX(-50%) skewX(325deg); transition: 0.5s; } a:hover i::after{ width: 20px; left: 80%; }
JS
Copy