WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
botón
518
AmirAliAkrami
Abrir en el editor
Publica tu código
¿Necesitas un sitio web?
Recomendado
15 May 2025
Botones de neón
16 May 2025
botón brillante 2
31 January 2025
botón más
HTML
Copy
بیشتر دانستن
CSS
Copy
button { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; } button.learn-more { width: 12rem; height: auto; } button.learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #3f4af0; border-radius: 1.625rem; } button.learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } button.learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; } button.learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } button.learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #282936; font-weight: 700; line-height: 1.6; text-align: center; text-transform: uppercase; } button:hover .circle { width: 100%; } button:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); } button:hover .button-text { color: #fff; } @supports (display: grid) { body { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.625rem; grid-template-areas: ". main main ." ". main main ."; } #container { grid-area: main; align-self: center; justify-self: center; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */