সিএস‌এস ইউনিক হোভার ইফেক্ট

a:hover হোভার ব্যাকগ্রাউন্ড স্টাইল উদাহরণ?

লিংকের উপর মাউস নিলে বিভিন্ন স্টাইল দেখানোর জন্য a:hover ব্যবহার করা হয়। নিচে ১০টি ইউনিক উদাহরণ দেওয়া হলো:

১. Sky Blue Hover

হালকা নীল রঙের ব্যাকগ্রাউন্ড ইফেক্ট করবে।

এই লিংকে হোভার করুন

.hover-blue a:hover {
  background: rgba(0, 200, 255, 0.15);
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
}

২. Sunset Orange

কমলা রঙের হালকা ব্যাকগ্রাউন্ড ইফেক্ট।

এই লিংকে হোভার করুন

.hover-orange a:hover {
  background: rgba(255, 87, 34, 0.12);
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
}

৩. Neon Green

সবুজ হালকা আলোতে ইফেক্ট।

এই লিংকে হোভার করুন

.hover-green a:hover {
  background: rgba(0, 255, 100, 0.12);
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
}

৪. Royal Purple

বেগুনি রঙের ইফেক্ট।

এই লিংকে হোভার করুন

.hover-purple a:hover {
  background: rgba(102, 51, 153, 0.14);
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
}

৫. Golden Yellow Hover

সোনালী রঙের ব্যাকগ্রাউন্ড ইফেক্ট।

এই লিংকে হোভার করুন

.hover-yellow a:hover {
  background: rgba(255, 215, 0, 0.13);
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
}

৬. Indigo Shadow Hover

ইন্ডিগো ব্যাকগ্রাউন্ড ও শ্যাডো ইফেক্ট।

এই লিংকে হোভার করুন

.hover-indigo a:hover {
  background: rgba(63, 81, 181, 0.12);
  box-shadow: 0 4px 10px rgba(63, 81, 181, 0.2);
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
}

৭. Gradient Hover Effect

গ্র্যাডিয়েন্ট রঙের স্টাইলিশ ইফেক্ট।

এই লিংকে হোভার করুন

.hover-gradient a:hover {
  background: linear-gradient(90deg, #ff6ec4 0%, #7873f5 100%);
  color: white;
}

৮. Border Only Hover

কেবল বর্ডার পরিবর্তনের ইফেক্ট।

এই লিংকে হোভার করুন

.hover-border a:hover {
  border-color: #00bcd4;
  color: #00bcd4;
}

৯. Glow Hover Effect

লিংকের চারপাশে আলোর গ্লো ইফেক্ট।

এই লিংকে হোভার করুন

.hover-glow a:hover {
  background: rgba(0, 230, 118, 0.08);
  box-shadow: 0 0 8px #00e676;
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
}

১০. Slide Underline Hover

সুন্দর অ্যানিমেশনে আন্ডারলাইন ইফেক্ট।

এই লিংকে হোভার করুন

.hover-underline a::after {
  width: 0;
  height: 2px;
  background: #ff4081;
}
.hover-underline a:hover::after {
  width: 100%;
}

সফলতা অর্জন করতে হলে, ধৈর্য্য ধরে চেষ্টা করে যেতে হবে- ইনশাআল্লাহ ভালো কিছু করা সম্ভব | শুধু দরকার ইচ্ছে শক্তি।
Happy Learning 😊