كيفاش تزيد les styles css ل les boutons html


فهاد الدرس الجديد من سلسلة html و css للمبتدئين غادي نشوفوا كيفاش نزيدو des styles css ل les boutons ديالنا.
فغادي نزيدو bouton و lien وغادي نزيدولهم نفس style css باش نخليوهم يكون عندهم نفس ديزاين.


1- إضافة الملفات الأساسية

أول حاجة زيد dossier جديد فيه زيد جوج ديال الملفات index.html و style.css منبعد ف index.html غادي نزيدو الكود html لي فيه :
- p عندها classe container وفوسطها input لي عطيناها ل class form-button ورابط لي عندو نفس ل classe.
وفل header زدنا الرابط للملف style.css الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Html Buttons Style</title>
</head>
<body>
    <p class="container">
        <input type="button" value="valider" class="form-button">
        <a href="#" class="form-button">Valider</a>
    </p>
</body>
</html>
                            

2- إضافة les styles css

فل fichier style.css كنزيد ل class container لي عطيتها عرض ديال 50% لي هو النص ديال ل html لي هو document وعطيتها ل margin 0 لفوق ولتحت و auto فليمن وليسر باش تولي عندي فوسط الملف.
منبعد عندي ل class form-button لي كتزيد des styles css لل bouton فكنحصلو على النتيجة لي فالصورة :



الكود لي زدنا هو :

                                /***css part 1***/
html{
    width: 100%;
}
.container{
   width: 50%; 
   margin: 100px auto;
}
input{
    margin: 0 20px;
}
.form-button{
    border: 1px solid #282728;
    background-color: rgb(173, 109, 233);
    display: inline-block;
    font-weight: 500;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
   
}
                            

3- تغيير لون خلفية les boutons ولون texte

باش ندير تغيير لون خلفية les boutons ولون texte زدنا الكود css دائما فل class form-button باش عطانا النتيجة لي فالصورة :


الكود لي زدنا هو :

                                /***css part 1***/
html{
    width: 100%;
}
.container{
   width: 50%; 
   margin: 100px auto;
}
input{
    margin: 0 20px;
}
.form-button{
    border: 1px solid #282728;
    background-color: rgb(173, 109, 233);
    display: inline-block;
    font-weight: 500;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /**part 2**/
    text-transform: uppercase;
    font-size: 1.2em;
    line-height: 1.22em;
    padding: 6px 20px;
    cursor: pointer;
    color: aliceblue;
    text-decoration: none;
}
                            

4- تغيير لون خلفية les boutons تتمة

من بعد كنزيد الكود css لي كيمكن من إضافة لون الخلفية على شكل linear فكيبدى من لون وكينتهي فلون كيف كنشوف فالصورة :



وكنزيد لل boutons واحد الظل اسود لي زدتو ب box-shadow الكود بعد التعديل هو :

                                    /***css part 1***/
html{
    width: 100%;
}
.container{
   width: 50%; 
   margin: 100px auto;
}
input{
    margin: 0 20px;
}
.form-button{
    border: 1px solid #282728;
    background-color: rgb(173, 109, 233);
    display: inline-block;
    font-weight: 500;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /**part 2**/
    text-transform: uppercase;
    font-size: 1.2em;
    line-height: 1.22em;
    padding: 6px 20px;
    cursor: pointer;
    color: aliceblue;
    text-decoration: none;
    /**part 3**/
    border-radius: 12px;
    box-shadow: 1px 3px 5px #999;
    background: -webkit-linear-gradient(top,#f9ccef,#de1bb3);
    background: linear-gradient(to bottom, #f9ccef, #de1bb3);
}
                                

5- تغيير لون الخلفية عند الضغط على الزر

فباش نبدل اللون ملي نكليكي على ل bouton غادي نزيد الكود css لي غادي يمكن من هادشي ولي كنعطيه ل class form-button وكنحدد active: يعني فاش كيتضغط على bouton كيتغير لون الخلفية وايضا لون texte كيف كنشوف فالصورة :



الكود لي زدنا هو :

                                    /***css part 1***/
html{
    width: 100%;
}
.container{
   width: 50%; 
   margin: 100px auto;
}
input{
    margin: 0 20px;
    /**part 5**/
    border: 0;
    padding: 0;
    outline: none;
}
.form-button{
    border: 1px solid #282728;
    background-color: rgb(173, 109, 233);
    display: inline-block;
    font-weight: 500;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /**part 2**/
    text-transform: uppercase;
    font-size: 1.2em;
    line-height: 1.22em;
    padding: 6px 20px;
    cursor: pointer;
    color: aliceblue;
    text-decoration: none;
    /**part 3**/
    border-radius: 12px;
    box-shadow: 1px 3px 5px #999;
    background: -webkit-linear-gradient(top,#f9ccef,#de1bb3);
    background: linear-gradient(to bottom, #f9ccef, #de1bb3);
}
/**part 4**/
.form-button:active, .form-button:focus {
    color: #000;
    background: -webkit-linear-gradient(top, #de1bb3, #f9ccef);
    background: linear-gradient(to bottom, #de1bb3, #f9ccef);
}