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

CSS

.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;
}

Recomendado

Trecho de animação de carregamento CSS

Um código de Mete Han

Efeito de passar o mouse sobre o botão de vidro líquido em CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS