Nasıl oluşturulur: CSS ipucu

İpuçunu nasıl oluştururum

İlk adım - HTML ekleyin:

Bu örnekte, ipucu düğme öğesine aittir:

<button class="btn">İşe yarayan bir düğme <span class="ribbon">YENİ</span></button>

İkinci adım - CSS ekleyin:

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

Kendi kendine deneyin

Örnek açıklaması:

Bu örnekte, CSS, bir düğmeye bir ipucu efekti eklemek için kullanılır. Bu ipucu, düğme öğesi içine özel bir tarzla sahip bir span öğesi eklenerek gerçekleştirilir. Bu span öğesi, düğmenin sağ üst köşesine konumlandırılır ve 20 derece döndürülür, böylece bir ipucu efekti oluşturulur. İpuçunun arka plan rengi ve metin rengi de düğme ile farklı renkler olarak ayarlanır, böylece görsel etkisi artırılır.