Buton

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 53 / 76.

Görev

Kolay

Bu derste, gönder düğmesini görsel olarak çekici hale getirmek için stil vereceğiz. Bir arka plan rengi uygulayacak, metin rengini ve iç boşluğu (padding) ayarlayacak, köşeleri yuvarlayacak ve formun öne çıkmasını sağlamak için bir kutu gölgesi (box-shadow) ekleyeceksiniz.

<button> öğesini stillendirin. Aşağıdaki adımları takip edin:

Tüm alanı doldurması için width değerini 100% olarak ayarlayın.
İstediğiniz bir background-color uygulayın.
text color (metin rengini) değiştirin ve yazı tipinin öne çıkmasını sağlayın.
Boşlukları iyileştirmek için padding ekleyin.
Köşeleri yuvarlayın.
Düğmenin arka plandan öne çıkmasını sağlamak için düğmeye bir box-shadow özelliği uygulayın.

Kendin dene

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>