ওয়েবসাইটে কেনো হোভারএর ব্যবহার করা হয় ?
এর উত্তর আপনার আগে থেকেই জানা আছে । তবে কেউ যদি না জেনে থাকেন তবে দেখে নিন । ধরুন আপনার ওয়েবসাইটে আপনি ডাউনলোড বাটন সংযুক্ত করলেন ।
এবার এটাকে এভাবেই ছেরে দিবেন ? এ অবস্থায় থাকলে আপনার সাইটে প্রবেশকৃত একজন এটা দেখেই সাইট থেকে বের হয়ে যাবে । এজন্য CSS ব্যহহার করে আপনার সাইটের হোভার বাটনকে আরো ডাইনামিক করে তুলতে হবে ।
যেমনঃ
padding:5px; – বাটনের চারপাশে কি পরিমান ফাকা স্থান থাকবে ।
border-radius: 5px; – বাটনের চারপাশে কতটুকু গোলাকার হবে ।
cursor: pointer; – বাটনের ওপর মাউস কার্সার পয়েন্টার পরিবর্তন হবে ।
HTML Poperty:
border-radius: 5px;
cursor: pointer;
background:black; – বাটনের ওপর মাউস কার্সার পয়েন্টার গেলে বাটন কালো হয়ে যাবে ।
color:white; – বাটনের ওপর মাউস কার্সার পয়েন্টার গেলে বাটনের ভেতরে থাকা Download লেখাটি সাদা হয়ে যাবে ।
HOVER Poperty:
.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>