Paano gumawa: CSS lanyada

Paano gumawa ng lanyada

Unang hakbang - Magdagdag ng HTML:

Sa katulad na ito, ang lanyada ay nasa loob ng elemento ng button:

<button class="btn">Isang button para sa isang bagay na cool <span class="ribbon">NEW</span></button>

Ikalawa na hakbang - Magdagdag ng CSS:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

Subukan nang personal!

Paliwanag ng halimbawa:

Sa katulad na ito, ang CSS ay ginamit upang magdagdag ng isang epekto ng lanyada sa isang button. Ang lanyada ay maisasagawa sa pamamagitan ng pagdagan ng isang span na may partikular na estilo sa loob ng elemento ng button. Ang span na ito ay na-locate sa kanang itaas ng button at nairot na 20 degrees upang lumikha ng epekto ng lanyada. Ang kulay ng likod at teksto ng lanyada ay itinakda din nang magkaiba sa kulay ng button upang madagdagan ang epekto ng pangkawalang-pansin.