সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) বাটন


সিএসএস(৩) দ্বারা আপনি একটি বাটনে আপনার পছন্দমত স্টাইল করতে পারেন। আমরা এই অধ্যায়ে দেখবো কিভাবে সিএসএস ব্যবহার করে বাটনের স্টাইল করা যায়।


বেসিক বাটন স্টাইল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: whitesmoke;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>

<h2>সিএসএস বাটন</h2>

<button>ডিফল্ট বাটন</button>
<a href="#" class="button">লিংক বাটন</a>
<button class="button">বাটন</button>
<input type="button" class="button" value="ইনপুট বাটন">
</body>
</html>

ফলাফল




বাটনের কালার

বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে background-color প্রোপারটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: whitesmoke;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button2 {background-color: #4CAF50;} /* Green */
.button3 {background-color: #008CBA;} /* Blue */
.button4 {background-color: #f44336;} /* Red */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>

<h2>সিএসএস বাটন</h2>
<p> background-color প্রোপার্টির মাধ্যমে বাটনের ব্যাকগ্রাউন্ড  কালার পরিবর্তন করা হয়।</p>

<button class="button">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>

ফলাফল




বাটনের সাইজ

বাটনের ফন্ট সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: whitesmoke;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>

<h2>বাটন সাইজ</h2>
<p> font-size প্রোপার্টি ব্যবহারের মাধ্যমে বাটনের ফন্ট সাইজ পরিবর্তন করা হয়।</p>

<button class="button button1">১০ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল</button>
<button class="button button3">১৬ পিক্সেল</button>
<button class="button button4">২০ পিক্সেল</button>
<button class="button button5">২৪ পিক্সেল</button>
</body>
</html>

ফলাফল



বাটনের পেডিং পরিবর্তন করতে padding প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: whitesmoke;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 16px;}
.button5 {padding: 32px 16px;}
</style>
</head>
<body>

<h2>বাটন সাইজ</h2>
<p>padding প্রোপার্টির মাধ্যমে বাটনের পেডিং পরিবর্তন করা হয়।</p>

<button class="button button1">১০ পিক্সেল ২৪ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল ২৮ পিক্সেল</button>
<button class="button button3">১৪ পিক্সেল ৪০ পিক্সেল</button>
<button class="button button4">১৬ পিক্সেল</button>
<button class="button button5">৩২ পিক্সেল ১৬ পিক্সেল</button>
</body>
</html>

ফলাফল




গোলাকৃতি বাটন

বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: whitesmoke;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>

<h2>গোলাকৃতি বাটন</h2>
<p>বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করা হয়েছে।</p>

<button class="button button1">২ পিক্সেল</button>
<button class="button button2">৪ পিক্সেল</button>
<button class="button button3">৮ পিক্সেল</button>
<button class="button button4">১২ পিক্সেল</button>
<button class="button button5">৫০%</button>
</body>
</html>

ফলাফল




বাটনের বর্ডার কালার

বাটনে বর্ডার কালার যুক্ত করতে border প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button1 {
    background-color: white;
    color: black;
    border: 3px solid teal;
}
.button2 {
    background-color: white;
    color: black;
    border: 3px solid #4CAF50;
}
.button3 {
    background-color: white;
    color: black;
    border: 3px solid #008CBA;
}
.button4 {
    background-color: white;
    color: black;
    border: 3px solid #f44336;
}

.button5 {
    background-color: white;
    color: black;
    border: 3px solid #555555;
}
</style>
</head>
<body>

<h2>কালার বাটন বর্ডার</h2>
<p>বাটনে বর্ডার যুক্ত করার জন্য border প্রোপার্টি ব্যবহার করাহয়েছে।</p>

<button class="button button1">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>

ফলাফল




বাটন হোভার


আপনি বাটনে হোবার ইফেক্ট যুক্ত করতে hover সিলেক্টর ব্যবহার করুন।

পরামর্শঃ হোভার এর গতি নিয়ন্ত্রন করার জন্য transition-duration প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white;
    color: black;
    border: 2px solid teal;
}
.button1:hover {
    background-color: teal;
    color: white;
}
.button2 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}
.button2:hover {
    background-color: #4CAF50;
    color: white;
}
.button3 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
}
.button3:hover {
    background-color: #008CBA;
    color: white;
}
.button4 {
    background-color: white;
    color: black;
    border: 2px solid #f44336;
}
.button4:hover {background-color: #f44336;}
.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}
.button5:hover {
    background-color: #555555;
    color: white;
}
</style>
</head>
<body>

<h2>হোভারেবল বাটন</h2>
<p>মাউস নড়াচড়া করানোর সাথে সাথে বাটনের স্টাইল পরিবর্তনের জন্য hover selector ব্যবহার করা হয়েছে।</p>
<p><strong>টিপস:</strong>"hover" এর দ্রুত প্রতিক্রিয়া নির্ধারণ করার জন্য transition-duration প্রোপার্টি ব্যবহার করা হয়েছে।</p>

<button class="button button1">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>

ফলাফল




বাটন শ্যাডো

বাটনে শ্যাডো যুক্ত করার জন্য box-shadowপ্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white;
    color: black;
    border: 2px solid teal;
}
.button1:hover {
    background-color: teal;
    color: white;
}
.button2 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}
.button2:hover {
    background-color: #4CAF50;
    color: white;
}
.button3 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
}
.button3:hover {
    background-color: #008CBA;
    color: white;
}
.button4 {
    background-color: white;
    color: black;
    border: 2px solid #f44336;
}
.button4:hover {background-color: #f44336;}
.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}
.button5:hover {
    background-color: #555555;
    color: white;
}
</style>
</head>
<body>

<h2>স্যাডো বাটন</h2>
<p>বাটনকে স্যাডো করার জন্য box-shadow প্রোপের্টি ব্যবহার কর হয়েছে।</p>

<button class="button button1">স্যাডো বাটন</button>
<button class="button button2">হোভারের উপর শ্যাডো</button>
</body>
</html>

ফলাফল




ডিজেবল(Disable) বাটন

একটি বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করুন।

পরামর্শঃ যখন আপনি বাটনের উপর মাউস নিয়ে যাবেন তখন একটি "no parking sign" দেখানোর জন্য cursor প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>
</head>
<body>

<h2>ডিজেবল বাটন</h2>
<p>opacity প্রোপার্টি ব্যবহারের মাধ্যমে বাটনে কিছু টান্সপারেন্সি যুক্ত করা হয় (এটা বাঁটনকে ডিজেবল বানায়)</p>

<button class="button button1">সাধারণ বাটন</button>
<button class="button button2">ডিজেবল বাটন</button>
</body>
</html>

ফলাফল




বাটনের প্রস্থ


ডিফল্ট ভাবে একটি বাটনের সাইজ এর ভিতর অবস্থিত টেক্সটের সাইজের উপর নির্ভর করে। একটি বাটনের সাইজ পরিবর্তন করতে width প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {width: 200px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
</style>
</head>
<body>

<h2>বাটনের প্রশস্ততা</h2>
<p<width প্রোপার্টি ব্যবহারের মাধ্যমে বাটনের প্রশস্ততা পরিবর্তন করা হয়।</p<
<p><strong<টিপস:</strong<আপনি যদি বাটনের প্রশস্ততা স্থায়ীভাবে দিতে চান
তবে পিক্সেল ব্যবহার করতে হবে এবং বাটনকে রেস্পন্সিভ করার জন্য পার্সেন্টিজ (%) ব্যবহার করতে হবে।
এখন এর প্রতিক্রিয়া দেখার জন্য ব্রাউজারের উইন্ডোকে রিসাইজ করুন।</p>

<button class="button button1">২০০ পিক্সেল</button>
<button class="button button2">৫০%</button>
<button class="button button3">১০০%</button>

</body>
</html>

ফলাফল




বাটন গ্রুপ


বাটন গুলো থেকে মার্জিন বাদ দিয়ে float:left প্রোপার্টি যুক্ত করে বাটনের গ্রুপ তৈরি করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: teal;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button:hover {
    background-color: orangered;
}
</style>
</head>
<body>

<h2>বাটন গ্রুপ</h2>
<p<বাটনের মার্জিন এবং ফ্লোট দূর করার জন্য বাটন গ্রুপ তৈরি করা হয়।</p<

<button class="button button1">২০০ পিক্সেল</button>
<button class="button button2">৫০%</button>
<button class="button button3">১০০%</button>
<p style="clear:both">>br<ফ্লোটগুলো বাদ দেওয়ার পর p এলিমেন্টের ফ্লোটগুলোও পরবর্তী বাটনে চলে যায়।</p>
</body>
</html>

ফলাফল




বর্ডার সহ বাটন গ্রুপ


বর্ডার সহ বাটন গ্রুপ তৈরি করতে বাটন গ্রুপের সাথে border প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color:teal;
    border: 1px solid purple;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    float: left;
}
.button:hover {
    background-color: orangered;
}
</style>
</head>
<body>

<h2>বর্ডারসহ বাটন গ্রুপ</h2>
<p<বর্ডারসহ বাটন গ্রুপ তৈরি করার জন্য বর্ডার যুক্ত করা হয়।</p<
<button class="button"<বাটন ১</button<
<button class="button"<বাটন ২</button<
<button class="button"<বাটন ৩</button<
<button class="button"<বাটন ৪</button<

<p style="clear:both">>br<ফ্লোটগুলো বাদ দেওয়ার পর p এলিমেন্টের ফ্লোটগুলোও পরবর্তী বাটনে চলে যায়।</p>
</body>
</html>

ফলাফল




এনিমেটেড বাটন

একটি বাটনে আপনি বিভিন্ন ধরনের এনিমেশন যুক্ত করতে পারবেন। তার মধ্যে আমরা নিম্নের বাটনের ভিতর হোবার ইফেক্টে এরো (arrow ) চিহ্ন যুক্ত করবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: teal;
  border: none;
  color: whitesmoke;
  text-align: center;
  font-size: 25px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>

<h2>অ্যারো ইফেক্ট</h2>
<button class="button" style="vertical-align:middle"><span>মাউস আনুন</span></button>
</body>
</html>

ফলাফল



এই উদাহরনে আমরা বাটন ক্লিকে একটি রিপল("ripple") ইফেক্ট যুক্ত করবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    position: relative;
    background-color: teal;
    border: none;
    font-size: 28px;
    color: whitesmoke;
    padding: 20px;
    width: 300px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.button:after {
    content: "";
    background: orangered;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
</style>
</head>
<body>

<h2>রিপল (Ripple) ইফেক্ট</h2>
<button class="button"><span>বাটনে ক্লিক করুন</span></button>
</body>
</html>

ফলাফল



উদাহরণ

এই উদাহরনে আমরা বাটন ক্লিকে একটি প্রেস("pressed") ইফেক্ট যুক্ত করবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: whitesmoke;
  background-color: teal;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px lightgrey;
}
.button:hover {background-color: teal}
.button:active {
  background-color: orangered;
  box-shadow: 0 5px grey;
  transform: translateY(4px);
}
</style>
</head>
<body>

<h2>প্রেসড (Pressed) ইফেক্ট</h2>
<button class="button"><span>বাটনে ক্লিক করুন</span></button>
</body>
</html>

ফলাফল