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örseliKendi başına pratik yap: Web playground