सीएसएस रिबन

अनुशंसित

11 September 2023

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

सीएसएस रिबन

अनुशंसित

सीएसएस सोशल आइकन्स

सीएसएस ब्लॉक एनीमेशन संरचना

सीएसएस चमकते बटन

HTML

CSS

JS

अनुशंसित

सीएसएस सोशल आइकन्स

सीएसएस ब्लॉक एनीमेशन संरचना

सीएसएस चमकते बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS