css animations & transitions (button effect 2)


فثاني projet من سلسلة css animations & transitions غادي نقادو button effect بإستعمال css translate ولي ممكن تشوف demo فالفيديو المرفق مع الشرح المفصل للكود.

نظرة سريعة بالفيديو


1- إضافة ل index.html


أول حاجة زيد dossier جديد سميه لي بغيتي فيه زيد fichier index.html لي هو الصفحة الرئيسية ولي فيه ل bouton ديالنا.

الكود ديال الملف هو :

                                    
                                        //
<!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="style2.css">
    <title>Button Effect</title>
</head>

<body>
    <button>css transition</button>
</body>

</html>
                                    
                                

2- إضافة الملف style.css


منبعد زيد الملف style.css لي غادي يكون فيه style css لي غادي يمكنا باش نزيدو ل effect ل bouton ديالنا.

الكود ديال الملف هو :

                                    
                                        //
body{
    height : 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

button{
    background: transparent;
    padding: 10px;
    height: 90px;
    width : 300px;
    border : 2px solid black;
    font-size: 30px;
    position: relative;
    overflow: hidden;
    transition: all 1s linear;
}


button:before{
    content : '';
    position : absolute;
    left : 0;
    top : 0;
    background-color: #ff0099;
    height: 100%;
    width : 100%;
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 1s;
}

button:hover{
    color : white;
    border-color: beige;
    border-radius: 50px;
    box-shadow: 2px 2px 2px #000;
    cursor: pointer;
}

button:hover:before{
    transform: translateX(0);
}
                                    
                                

كلمات مفاتيح :

دروس ذات صلة