skip
Tuesday , January 31 2023

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: ‘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 Make A Slider By Using CSS – Full Guideline

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

Fully Customized Left Fixed Ads Holder For Desktop Preview

 <style> /* customized – Left Fixed Ads */@media (max-width: 868px) {  .left-fixed {    display:none;  }}.left-fixed …

Disable text selection in websites or your Blogs│Copy Protect

Disable text selection in your wordpress or blogger sites Your Website content is most valuable …

CSS Animation Slide From TOP │ Bottom │ Left │ Right │ Zoom │ Fade in │ Opacity │with Css Spin Animation Code

CSS Animation Css Animation Slide From Top This type of css help you to make …

CSS swing Effect Code

CSS swing Effect Code <style>.swing {    animation: swing ease-in-out 1s infinite alternate;    transform-origin: center -20px;    …

CSS Multi-column Properties

Multi-column 2 .text-col2 {  column-count: 2;  column-gap: 20px;  column-rule: 1px solid lightblue;} Preview: Lorem ipsum …

CSS Tooltip Code

  Easy Use Of ToolTip Code! A tooltip is a graphical user interface (GUI) element …

CSS hover effects buttons

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

0 0 votes
Article Rating
Subscribe
Notify of
guest

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