Buton Hover Efekti
Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 41 / 43.
Görev
KolayHTML'de halihazırda bir buton bulunmaktadır. Amacınız, kullanıcı üzerine geldiğinde (hover) butonun hafifçe büyümesini sağlamaktır. CSS'de, .cta-button sınıfını şu şekilde stillendirin:
- Pürüzsüz bir geçişe sahip olsun:
transition: transform 0.3s ease;. - Üzerine gelindiğinde (hover),
transform: scale(1.05)kullanarak boyutu biraz artsın.
Kendin dene
<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>
CSS Mastery bölümündeki tüm dersler
1Seçici Uzmanlığı – Kombinasyon
GirişAlt Öğe SeçicisiÇocuk SeçiciBitişik Kardeş SeçicisiGenel Kardeş SeçicisiÖzet Meydan Okuması2Etkileşimli Sözde Sınıflar
Sözde SınıflarHover EfektleriOdaklanma EfektleriAktif StillerÖzet Meydan Okuması3Yapısal sözde sınıflar
Yapısal sözde sınıflarİlk Çocuğu HedeflemeSon Çocuğu HedeflemeDesen Gücü: nth-child KullanımıÖzet Meydan Okuması6Açılış Sayfası
Header Bölümünü Stilize EtButonu Stilize EtBölüm DüzeniKart DüzeniSon Dokunuşları Ekle9Son Meydan Okumalar
Aktif Menüyü VurgulamaZebra Tablo SatırlarıButon Hover EfektiGrid Kart DüzeniBulanık Hero Görseli