কম্পিউটার টিউটোরিয়াল

CSS দিয়ে হোভার ইফেক্টের গতি সেট করুন


হোভার ইফেক্টের গতি সেট করতে transition-duration প্রপার্টি ব্যবহার করুন। হোভার সেট করতে :hover সিলেক্টর ব্যবহার করুন।

উদাহরণ

হোভার ইফেক্টের গতি বাড়াতে নিচের কোডটি চালাতে পারেন:

<!DOCTYPE html> <html>    <head>       <style>          .btn {             background-color: yellow;             color: black;             text-align: center;             font-size: 15px;             padding: 20px;             border-radius: 15px;             border: 3px dashed blue;             transition-duration: 2s;          }          .btn:hover {             background-color: orange;             color: black;             border: 3px solid blue;          }       </style>    </head>    <body>       <h2>Result</h2>       <p>Click below for result:</p>       <button class = "btn">Result</button>    </body> </html>

  1. CSS দিয়ে ট্রানজিশন ইফেক্টের গতি কার্ভ সেট করা

  2. CSS দিয়ে অ্যানিমেশনের শুরু থেকে শেষ পর্যন্ত একই গতি সেট করুন

  3. CSS দিয়ে বাটন হোবারে ফেড-ইন ইফেক্ট তৈরি করুন

  4. CSS দিয়ে বাটনের প্রস্থ সেট করুন