WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
botão mais
815
AmirAliAkrami
Abrir no Editor
Publique Seu Código
Recomendado
10 July 2025
Efeito de foco de botão animado em CSS
26 October 2024
Botão de interruptor de luz escura.
28 January 2025
botão
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) */