WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Ribbon
1351
ledoc
Open In Editor
Publish Your Code
Recommended
29 September 2025
CSS Loading Animation with Background Image
25 August 2024
CSS 3D Solar System
8 October 2025
CSS Loading Animation HTML Structure
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) */