WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Faixa de opções CSS
1354
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
24 July 2025
Trecho de animação de carregamento CSS
17 April 2025
Um código de Mete Han
28 November 2025
Efeito de passar o mouse sobre o botão de vidro líquido em CSS
HTML
Copy
Pure CSS Ribbon
CSS
Copy
.css-ribbon { position: relative; z-index: 1; padding: 1em 2em; } .bsribbon { font-size: 120% !important; width: 60%; position: relative; background: #0cc5f4; color: #fff; text-align: center; padding: 1em 2em; margin: 2em auto 3em; } .bsribbon:before, .bsribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #04a8d1; z-index: -1; } .bsribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } .bsribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } .bsribbon .ribbon-content:before, .bsribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #088eb0 transparent transparent transparent; bottom: -1em; } .bsribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .bsribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } @keyframes colorChange { 0% { background-color: #36d0ff; } 50% { background-color: #2c86d4; } 100% { background-color: #36D0FF7; } } .bsribbon { animation: colorChange 3s infinite; } .bsribbon:hover { box-shadow: 0 0 10px #ffffff; } button:hover { background-color: #9ad9e3; } .bsribbon:active { background-color: #eddcad; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */