Bagaimana membuat: Bunga pelangi CSS

Bagaimana membuat bunga pelangi

Langkah pertama - Tambahkan HTML:

Dalam contoh ini, bunga pelangi termasuk elemen tombol:

<button class="btn">Tombol untuk sesuatu yang menarik <span class="ribbon">BARU</span></button>

Langkah kedua - Tambahkan CSS:

.btn {
  border: tak ada;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  warna: putih;
  position: relatif;
}
.ribbon {
  lebar: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolut;
  kanan: -25px;
  atas: -12px;
  text-align: tengah;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  warna: putih;
}

Coba sendiri

Pengertian contoh:

Dalam contoh ini, CSS digunakan untuk menambah efek bunga pelangi pada tombol. Bunga pelangi ini dicapai dengan menambahkan elemen span dengan gaya khusus di dalam elemen tombol. Elemen span ini ditempatkan di pojok kanan atas tombol dan dirotasi 20 derajat untuk menciptakan efek bunga pelangi. Warna latar dan teks bunga pelangi juga diatur berbeda dengan warna tombol untuk meningkatkan efek visual.