Buton Hover Efekti
Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 41 / 43.
Görev
KolayHTML içinde zaten bir düğme var. Amacın, kullanıcı üzerine geldiğinde düğmenin biraz büyümesini sağlamak. CSS'te .cta-button öğesini şu şekilde biçimlendir:
- Sorunsuz bir geçişe sahip olsun:
transition: transform 0.3s ease;. - Üzerine gelindiğinde
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 Hakimiyeti 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