কম্পিউটার

কিভাবে CSS দিয়ে হোভারে ট্রানজিশন যোগ করবেন?


সিএসএস-এ হোভার সহ ট্রানজিশন যোগ করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
   }
   .scaleBtn {
      display: inline-block;
      background-color: #0c1377;
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      font-size: 16px;
      transition: 0.3s;
      margin: 20px;
   }
   .scaleBtn:hover {
      transform: scale(1.5);
   }
</style>
</head>
<body>
<h1>Transition on hover example</h1>
<button class="scaleBtn">Hover Here</button>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে হোভারে ট্রানজিশন যোগ করবেন?

"এখানে হোভার করুন এর উপরে হোভার করার সময়৷ ” বোতাম -

কিভাবে CSS দিয়ে হোভারে ট্রানজিশন যোগ করবেন?


  1. কিভাবে CSS দিয়ে হোভারে একটি উপাদান প্রদর্শন করবেন?

  2. কিভাবে CSS দিয়ে কার্ড তৈরি করবেন?

  3. কিভাবে CSS দিয়ে হোভারে একটি উপাদান জুম/স্কেল করবেন?

  4. কিভাবে CSS দিয়ে হোভারে ট্রানজিশন যোগ করবেন?