Only CSS Hover effects Button - animated CSS Button

 

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

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

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

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

 

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

ওয়েবসাইটে কেনো হোভারএর ব্যবহার করা হয় ?

 এর উত্তর আপনার আগে থেকেই জানা আছে । তবে কেউ যদি না জেনে থাকেন তবে দেখে নিন ।  ধরুন আপনার ওয়েবসাইটে আপনি ডাউনলোড বাটন সংযুক্ত করলেন ।

এবার এটাকে এভাবেই ছেরে দিবেন ? এ অবস্থায় থাকলে আপনার সাইটে প্রবেশকৃত একজন এটা দেখেই সাইট থেকে বের হয়ে যাবে । এজন্য CSS ব্যহহার করে আপনার সাইটের হোভার বাটনকে আরো ডাইনামিক করে তুলতে হবে ।
যেমনঃ

দেখুন হোভার সংযুক্ত করার জন্য বাটনে বেশ কিছু পরিবর্তন এসেছে । বাটনের ওপর মাউস কার্সার নিয়ে গেলে বাটন টি কালো এবং ভেতরের টেক্সট সাদা হিসেবে দেখাচ্ছে । নিচে দেখুন বাটন পোপার্টি দেওয়া আছে -

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

HTML Poperty:

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

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

HOVER Poperty:

  <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>

Preview:

Related Posts