skip
Friday , January 27 2023

CSS hover effects buttons

 
প্রথমে একটু পরিচয় হয়ে নিন  হোভার কি এবং এটা কিভাবে কাজ করে  ?
হোভার একটি ক্লিকযোগ্য বস্তুর উপরে একটি মাউস কার্সার সরানোর ক্রিয়া বর্ণনা করে, তবে বাস্তবে বাম বা ডান মাউস বোতামটি ক্লিক না করে। 
উদাহরণস্বরূপ, আপনি যখন এই পৃষ্ঠার যে কোনও লিঙ্কের উপরে মাউস ঘোরাবেন, লক্ষ করে দেখবেন তাদের রঙ পরিবর্তন হয়ে যায়, সেগুলি নির্দেশ করে যে সেগুলি ক্লিক করা যেতে পারে।
আপনি দেখতে পাবেন যে এই ক্রিয়াটি লিঙ্কটি সম্পর্কে অতিরিক্ত তথ্য দেখায়। অ্যানিমেটেড ছবি হ’ল বিভিন্ন উপাদানগুলির উপরে ঘুরে দেখার সাথে সাথে কার্সার কীভাবে পরিবর্তিত হয় তার একটি উদাহরণ। 
 
হোভার প্রকৃতভাবে মাউস কার্সার এর সাথে সম্পৃক্ত । কোনো নির্দিষ্ট স্থানে মাউস কার্সার যাওয়া মাত্রই সেই স্থানে কি ধরনের পরিবর্তন ঘটবে এটার করার প্রক্রিয়াকেই হোভার (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: ‘0bb’;
  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:

Check Also

How to Create a New Widget Section in Blogger Template Layout

New Widget Section in Blogger Template Layout  To add a new section in Blogger template …

Pure Css Notification Bell Hover – NO Java Script Required

How To Make Css Notification Bell Hover ? without any Java Script Here is two …

Start Countdown When I Click On Download Button Full Coding

Start Countdown When I Click On Download Button 100% Working You can use this code …

Responsive Bottom Sticky Footer Ads For Blogger or WordPress

Responsive Bottom Sticky Footer Ads Widget For Blogger or WordPress How Set up Sticky Footer …

Star Symbols Name HTML and CSS Code – HTML Symbols, Entities and Codes

Star Symbols HTML Code , CSS Code Name And Description Need the copyright sign hypertext …

How To Make Left Fixed Ads Section For Desktop Preview Only – Full Guideline

How To Include Left Fixed Ads Section For Desktop Preview For Blogger Or WordPress Site. …

How To Make A Slider By Using CSS – Full Guideline

What is CSS coding ?  CSS stands for Cascading Style Sheets. It is the coding …

Hide Navbar When Scroll Down丨Show Navbar When Scroll Top

How to hide a navbar when the user starts to scroll down ? Just using …

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
একজন লেখক হিসেবে এই সাইটে জয়েন করতে চান ?
আপনার লেখা পোষ্ট পাবলিশ করুন এবং সেই পোষ্ট থেকে অর্থ উপার্জন করুন
See More & Sign Up !