CSS hover effects buttons

 

প্রথমে একটু পরিচয় হয়ে নিন  হোভার কি এবং এটা কিভাবে কাজ করে  ?

হোভার একটি ক্লিকযোগ্য বস্তুর উপরে একটি মাউস কার্সার সরানোর ক্রিয়া বর্ণনা করে, তবে বাস্তবে বাম বা ডান মাউস বোতামটি ক্লিক না করে। 

উদাহরণস্বরূপ, আপনি যখন এই পৃষ্ঠার যে কোনও লিঙ্কের উপরে মাউস ঘোরাবেন, লক্ষ করে দেখবেন তাদের রঙ পরিবর্তন হয়ে যায়, সেগুলি নির্দেশ করে যে সেগুলি ক্লিক করা যেতে পারে।

আপনি দেখতে পাবেন যে এই ক্রিয়াটি লিঙ্কটি সম্পর্কে অতিরিক্ত তথ্য দেখায়। অ্যানিমেটেড ছবি হ'ল বিভিন্ন উপাদানগুলির উপরে ঘুরে দেখার সাথে সাথে কার্সার কীভাবে পরিবর্তিত হয় তার একটি উদাহরণ। 

 

হোভার প্রকৃতভাবে মাউস কার্সার এর সাথে সম্পৃক্ত । কোনো নির্দিষ্ট স্থানে মাউস কার্সার যাওয়া মাত্রই সেই স্থানে কি ধরনের পরিবর্তন ঘটবে এটার করার প্রক্রিয়াকেই হোভার (Hover) বলা হয় ।

padding:5px; - বাটনের চারপাশে কি পরিমান ফাকা স্থান থাকবে ।
border-radius: 5px; - বাটনের চারপাশে কতটুকু গোলাকার হবে ।
cursor: pointer;  - বাটনের ওপর মাউস কার্সার পয়েন্টার পরিবর্তন হবে ।

padding: 5px;
border-radius: 5px;
cursor: pointer;

HOVER পোপার্টিতে কি কি আছে দেখে নিন -
background:black; - বাটনের ওপর মাউস কার্সার পয়েন্টার গেলে বাটন কালো হয়ে যাবে ।
color:white; - বাটনের ওপর মাউস কার্সার পয়েন্টার গেলে বাটনের ভেতরে থাকা Download লেখাটি সাদা হয়ে যাবে ।

  <style>
    .lhbtn:hover{
      background:black;
      color:white;
    }
    </style>

 নিচে একটা পূর্নাঙ্গ CSS Dynamic HOVER বাটনের কোড দেওয়া হলো । ভালো করে দেখুন প্রয়োজনে এখান থেকে কোড কপি করে নিজের সাইটে বাটনটি বসিয়ে নিন ।

<style>

/* Customize Hover Button */
.lh-button {
  display: inline-block;
  border-radius: 4px;
  background-color:#0541ce;
  border: none;
  color: #137AFF;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 150px;
  height: 35px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.lh-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color: white;
}

.lh-button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.lh-button:hover span {
  padding-right: 25px;
}

.lh-button:hover span:after {
  opacity: 1;
  right: 0;
}

</style>

Html Section

<a href="url"><button class="lh-button" style="vertical-align:middle"><span> Click Here</span></button></a>