X

X

X

CSS Links


সিএসএস দিয়ে কোনো লিংককে বিভিন্নভাবে স্টাইল করা যায়। যেমন, লিংককে বাটন আকারে উপস্থাপণ।

লিংক স্টাইল করার পদ্ধতি

লিংককে বিভিন্নভাবে উপস্থাপণ করার জন্য যেকোনো ধরণের সিএসএস ব্যবহার করা যায়। যেমন, colorfont-familybackground, ইত্যাদি।

Code Example

<style>
a {
    color: hotpink;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

আবার, state প্রপার্টি এর উপর ভিত্তি করে লিংকগুলোকে বিভিন্নভাবে উপস্থাপন করা যায়।
যেকোনো লিংকের চার ধরণের state রয়েছে:

  • a:link – বলতে স্বাভাবিক unvisited লিংককে বোঝায়।
  • a:visited – বলতে visited লিংককে বোঝায়।
  • a:hover – বলতে লিংকের উপর মাউস হোভার বা মাউস ধরে রাখার অবস্থাকে বোঝায়।
  • a:active – বলতে ক্লিকড লিংককে বোঝায়। অর্থাৎ, যেইমাত্র ব্যবহারকারী কোনো লিংককে ক্লিক করে তখন এই অবস্থার সৃষ্টি হয়।

Code Example

<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


When setting the style for several link states, there are some order rules:
সিএসএস দিয়ে কোনো লিংকের বিভিন্ন state -কে ডিজাইন করার জন্য নিচের নিয়ম অনুসরণ করতে হয়।

  • a:link এবং a:visited এর a:hover এর কোড লিখতে হবে।
  • a:hover এর পরে a:active এর কোড লিখতে হবে।

Text Decoration

মূলত text-decoration property ব্যবহার করা হয় লিংকের underline দূর করার জন্য:

Code Example

<style>
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Background Color

কোনো লিংকের ব্যাকগ্রাউন্ডের রং নির্ধারণ করার জন্য background-color property ব্যবহার করা হয়:

Code Example

<style>
a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Advanced – Link Button

কোনো লিংককে বাটন আকারে উপস্থাপণ করার জন্য নিচের উদাহরণের মত কোড লিখতে হয়।

Code Example

<style>
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ পাবেন এখানে

লিংকের বিভিন্ন ডিজাইন তৈরি করার উদাহরণ

Advanced – বর্ডারসহ লিংক বাটন তৈরি করার জন্য এই উদাহরণ অনুসরণ করুন।
Another example of how to create link boxes/buttons.

লিংকের কার্সর পরিবর্তন করার জন্য এই উদাহরণ অনুসরণ করুন।


নিজে নিজে চেষ্টা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »