Düğme

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 53 / 76.

Görev

Kolay

Bu derste, gönderme düğmesini görsel olarak çekici hâle getirmek için biçimlendireceğiz. Bir arka plan rengi uygulayacak, metin rengini ve dolguyu ayarlayacak, köşeleri yuvarlayacak ve formun öne çıkmasını sağlamak için forma bir kutu gölgesi ekleyeceksiniz.

<button> öğesini biçimlendirin. Aşağıdaki adımları izleyin:

Tüm alanı kaplaması için width değerini %100 olarak ayarlayın.
Tercihinize göre bir background-color uygulayın.
Metin rengini değiştirin ve yazı tipinin öne çıkmasını sağlayın.
Aralıkları 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>