css animations & transitions (button effect 1)


فهاد ال projet الجديد غادي نشوفوا كيفاش نقادو button effect بإستعمال css transitions  ممكن تشوف demo فالفيديو المرفق وهذا أول projet من سلسلة ديال les projets لي غادي نشوفوا من بعد.

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


1- إضافة index.html


أول حاجة زيد dossier سميه لي بغيتي فيه زيد fichier سميه index.html لي فيه structure html ديال ل fichier وأيضا عندنا ل 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="style.css">
    <title>Button Effect</title>
</head>

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

</html>
                                    
                                

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


منبعد زيد fichier css سميه style.css فيه الكود 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-origin: top;
    transform: rotate(180deg);
    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: rotate(0deg);
}
                                    
                                

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

دروس ذات صلة