Menu
CoddyTech
START LEARNING

Efek Hover Tombol

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 41 dari 43.

challenge icon

Tantangan

Mudah

Sebuah tombol sudah ada di HTML. Tujuanmu adalah membuatnya sedikit membesar saat pengguna mengarahkan kursor ke tombol tersebut. Di CSS, atur gaya .cta-button agar:

  • Tombol memiliki transisi yang mulus transition: transform 0.3s ease;.
  • Saat kursor diarahkan ke tombol, ukurannya sedikit membesar menggunakan transform: scale(1.05).

Coba sendiri

<html>
<head>
  <title>Button Hover Effect</title>
  <style> 
    
    /* Add your styles here */
      .cta-button {
      background-color: #6a1b9a;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
    }

  </style>
</head>
<body>
    <button class="cta-button">Click Me</button>
</body>
</html>

Semua pelajaran di Menguasai CSS

1Menguasai Selector, Kombinasi

PengantarSelector KeturunanSelector AnakSelector Saudara SebelahSelector Saudara UmumTantangan Rangkuman

4Proyek Menu Dropdown

Tambahkan SubmenuTampilkan SubmenuStyling tambahanInput dan tombol

7Membangun dengan CSS Grid

Dasar-Dasar GridPenempatan Item dengan grid-rowArea BernamaTantangan Rangkuman

2Pseudo-Class Interaktif

Pseudo-ClassEfek HoverEfek FocusGaya ActiveTantangan Rangkuman

5Efek Visual

GradienFilter CSSTransformasiTransisi dan Efek HoverTantangan Rangkuman

8Situs web Flavor Fiesta

Mengatur gridHeaderBagian utamaFooter

3pseudo-class struktural

pseudo-class strukturalMemilih Anak PertamaMemilih Anak TerakhirKekuatan Pola: Menggunakan nth-childTantangan Rangkuman

6Halaman Landing

Atur Gaya Bagian HeaderAtur Gaya TombolTata Letak BagianTata Letak KartuTambahkan Sentuhan Akhir

9Tantangan Akhir

Sorot Menu AktifBaris Tabel Berselang-selingEfek Hover TombolTata Letak Kartu GridGambar Utama yang Buram

Latihan sendiri: Playground Web