WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de alejandrokundrah
573
alejandrokundrah
Abrir en el editor
Publica tu código
Recomendado
20 October 2024
Botón de degradado CSS
2 July 2025
Un código de Mete
27 November 2024
Página de inicio - Rolex
HTML
Copy
DISCOVER
CSS
Copy
.type--A { --line_color: #555555; --back_color: #ffecf6; } .type--B { --line_color: #1b1919; --back_color: #e9ecff; } .type--C { --line_color: #00135c; --back_color: #defffa; } .button { position: relative; z-index: 0; width: 240px; height: 56px; text-decoration: none; font-size: 14px; font-weight: bold; color: var(--line_color); letter-spacing: 2px; transition: all 0.3s ease; } .button__text { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .button::before, .button::after, .button__text::before, .button__text::after { content: ""; position: absolute; height: 3px; border-radius: 2px; background: var(--line_color); transition: all 0.5s ease; } .button::before { top: 0; left: 54px; width: calc(100% - 56px * 2 - 16px); } .button::after { top: 0; right: 54px; width: 8px; } .button__text::before { bottom: 0; right: 54px; width: calc(100% - 56px * 2 - 16px); } .button__text::after { bottom: 0; left: 54px; width: 8px; } .button__line { position: absolute; top: 0; width: 56px; height: 100%; overflow: hidden; } .button__line::before { content: ""; position: absolute; top: 0; width: 150%; height: 100%; box-sizing: border-box; border-radius: 300px; border: solid 3px var(--line_color); } .button__line:nth-child(1), .button__line:nth-child(1)::before { left: 0; } .button__line:nth-child(2), .button__line:nth-child(2)::before { right: 0; } .button:hover { letter-spacing: 6px; } .button:hover::before, .button:hover .button__text::before { width: 8px; } .button:hover::after, .button:hover .button__text::after { width: calc(100% - 56px * 2 - 16px); } .button__drow1, .button__drow2 { position: absolute; z-index: -1; border-radius: 16px; transform-origin: 16px 16px; } .button__drow1 { top: -16px; left: 40px; width: 32px; height: 0; transform: rotate(30deg); } .button__drow2 { top: 44px; left: 77px; width: 32px; height: 0; transform: rotate(-127deg); } .button__drow1::before, .button__drow1::after, .button__drow2::before, .button__drow2::after { content: ""; position: absolute; } .button__drow1::before { bottom: 0; left: 0; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(-60deg); } .button__drow1::after { top: -10px; left: 45px; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(69deg); } .button__drow2::before { bottom: 0; left: 0; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(-146deg); } .button__drow2::after { bottom: 26px; left: -40px; width: 0; height: 32px; border-radius: 16px; transform-origin: 16px 16px; transform: rotate(-262deg); } .button__drow1, .button__drow1::before, .button__drow1::after, .button__drow2, .button__drow2::before, .button__drow2::after { background: var(--back_color); } .button:hover .button__drow1 { animation: drow1 ease-in 0.06s; animation-fill-mode: forwards; } .button:hover .button__drow1::before { animation: drow2 linear 0.08s 0.06s; animation-fill-mode: forwards; } .button:hover .button__drow1::after { animation: drow3 linear 0.03s 0.14s; animation-fill-mode: forwards; } .button:hover .button__drow2 { animation: drow4 linear 0.06s 0.2s; animation-fill-mode: forwards; } .button:hover .button__drow2::before { animation: drow3 linear 0.03s 0.26s; animation-fill-mode: forwards; } .button:hover .button__drow2::after { animation: drow5 linear 0.06s 0.32s; animation-fill-mode: forwards; } @keyframes drow1 { 0% { height: 0; } 100% { height: 100px; } } @keyframes drow2 { 0% { width: 0; opacity: 0; } 10% { opacity: 0; } 11% { opacity: 1; } 100% { width: 120px; } } @keyframes drow3 { 0% { width: 0; } 100% { width: 80px; } } @keyframes drow4 { 0% { height: 0; } 100% { height: 120px; } } @keyframes drow5 { 0% { width: 0; } 100% { width: 124px; } } .container { width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .button:not(:last-child) { margin-bottom: 64px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */