সিএসএস বাটন টিউটোরিয়াল (CSS Buttons Tutorial In Bangla)

সিএসএস বাটন (CSS Buttons)

CSS Buttons অর্থাৎ সিএসএস দিয়ে বানানো বিভিন্ন রকমের বা বিভিন্ন ডিজাইনের বাটন। আমরা যারা ওয়েব ডিজাইন নিয়ে কাজ করি সবাই কম বেশি ওয়েব পেজের জন্য বাটনের গুরুত্ব সম্পর্কে অবগত আছি। তবে, বাটন নিয়ে আমি দ্বীর্ঘ কোন টিউটোরিয়াল করব না। সর্বোচ্চ দশ'টি বাটনের ডিজাইন, হোভার ইফেক্ট এবং ক্লিক ইফেক্ট করে দেখাব। এই দশ'টি বাটন'কে দেখে আপনার নিজের মত করে হাজার বাটন তৈরী করতে পারেন। ভাল সিএসএস জানা থাকলে ইচ্ছে মত সুন্দর সুন্দর বাটন বানাতে আপনি ও পারবেন। আরো জানতে ভিডিও টিউটোরিয়ালটি দেখুন।

বিস্তারিত ভিডিও সহ দেখুন


<!DOCTYPE html>
 <html>
 <head>
 <title>CSS Button</title>
 <meta charset="UTF-8">
 <style>
.container{
width:80%;
margin:0px auto;
}

.button{
text-decoration:none;
font-family:arial;
font-size:22px;
padding:8px 12px;
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
color:#fff;
-webkit-border-radius:4px;
border-radius:4px;
box-shadow:0px 3px 5px rgba(0,0,0,0.5);
}
.button:hover{
background: -moz-linear-gradient(top, #3f4c6b 0%, #3f4c6b 100%);
background: -webkit-linear-gradient(top, #3f4c6b 0%,#3f4c6b 100%);
background: linear-gradient(to bottom, #3f4c6b 0%,#3f4c6b 100%);
}
.button:active{
	 position: relative; top: 3px;
	 -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.5);
	 -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.5);
	 box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.5);
	}

</style>
</head>
<body>
 <div class="container">
   <a class="button" href="#">Just Click Me</a>
 </div>
</body>
</html>

ভিডিও দেখুন নিজে করুন

ফলাফল

Red Gradient Button


 <style>
.button{
text-decoration:none;
font-family:arial;
font-size:22px;
padding:8px 12px;
color:#fff;
background-color: #bc1815;
-webkit-user-select: none;
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
.button:hover{
background: -moz-linear-gradient(top, rgba(204,0,0,1) 0%, rgba(204,0,0,1) 100%);
background: -webkit-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%);
}
.button:active{
position: relative; top: 3px;
-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}
</style>

   <a class="button" href="#">Just Click Me</a>

নিজে করে দেখুন

Facebook Button


 <style>
button{
    background-color:#395692;
	box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	border:1px solid #314179;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Helvetica,Geneva;
	font-size:20px;
	padding:6px 12px;
	text-decoration:none;
	font-weight:bold;
}
.button:hover{
	background-color:#5776BD;
}
.button:active{
  position:relative;
  top:2px;
}
</style>

   <a class="button" href="#">facebook</a>

নিজে করে দেখুন

Paracetamol Tablet Button


 <style>
.button{
    -moz-box-shadow: 3px 4px 0px 0px #bcbcbc;
	-webkit-box-shadow: 3px 5px 0px 0px #bcbcbc;
	box-shadow: 3px 5px 0px 0px #ccc;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fff), color-stop(1, #ddd));
	background:-moz-linear-gradient(top, #fff 5%, #ddd 100%);
	background:-webkit-linear-gradient(top, #fff 5%, #ddd 100%);
	background:-o-linear-gradient(top, #fff 5%, #ddd 100%);
	background:-ms-linear-gradient(top, #fff 5%, #ddd 100%);
	background:linear-gradient(to bottom, #fff 5%, #ddd 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	border-radius:30px;
	border:1px solid #dfdfdf;
	display:inline-block;
	cursor:pointer;
	color:#aaa;
	font-family:Arial;
	font-size:20px;
	padding:20px;
	text-decoration:none;
	text-shadow:1px 2px  0px #fff;
}
.button:hover{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ddd), color-stop(1, #fff));
	background:-moz-linear-gradient(top, #ddd 5%, #fff 100%);
	background:-webkit-linear-gradient(top, #ddd 5%, #fff 100%);
	background:-o-linear-gradient(top, #ddd 5%, #fff 100%);
	background:-ms-linear-gradient(top, #ddd 5%, #fff 100%);
	background:linear-gradient(to bottom, #ddd 5%, #fff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
	background-color:#bab1ba;
}
.button:active{
  position:relative;
  top:2px;
}
</style>

   <a class="button" href="#">PARACETAMOL</a>

নিজে করে দেখুন

Orange Black Gradient Button


 <style>
.button{
    text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #050505;
	padding: 10px 20px;
	background: -moz-linear-gradient(top,#babd13 0%,#e8aa00);
	background: -webkit-gradient(linear, left top, left bottom,from(#babd13),to(#e8aa00));
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	border: 5px solid #000000;
	-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);
	box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow:0px -1px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
}
.button:hover{
	background: -moz-linear-gradient(top,#f7ff00 0%,#ffbf00);
	background: -webkit-gradient(linear, left top, left bottom,from(#f7ff00),to(#ffbf00));
}
.button:active{
  position:relative;
  top:1px;
}
</style>
     <br>
   <a class="button" href="#">Please Click Me</a>

নিজে করে দেখুন

Nice Border Button


 <style>
.button{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #ffa200;
	padding: 10px 20px;
	background: -moz-linear-gradient(top,#ffffff 0%,#ffffff 50%,#d6d6d6);
	background: -webkit-gradient(linear, left top, left bottom,from(#ffffff),color-stop(0.50, #ffffff),to(#d6d6d6));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 3px solid #ffbf00;
	-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 3px rgba(255,255,255,1);
	-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 3px rgba(255,255,255,1);
	box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 3px rgba(255,255,255,1);
	text-shadow:0px -1px 0px rgba(000,000,000,0.1),0px 1px 0px rgba(255,255,255,1);
	text-decoration:none;
}
.button:hover{
	color:red;	
    border: 3px solid red;	
}
.button:active{
  position:relative;
  top:1px;
}
</style>
     <br>
   <a class="button" href="#">Please Click Me</a>

নিজে করে দেখুন

Top Bottom Background Button


 <style>
.button{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #103305;
	padding: 10px 20px;
	background: -moz-linear-gradient(top,#42ff42 0%,#ffffff 25%,#ffffff 75%,#3ce312);
	background: -webkit-gradient(linear, left top, left bottom,from(#42ff42),color-stop(0.25, #ffffff),color-stop(0.75, #ffffff),to(#3ce312));
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #134201;
	-moz-box-shadow:0px 1px 3px rgba(122,116,122,0.5),inset 0px 0px 1px rgba(10,1,10,1);
	-webkit-box-shadow:0px 1px 3px rgba(122,116,122,0.5),inset 0px 0px 1px rgba(10,1,10,1);
	box-shadow:0px 1px 3px rgba(122,116,122,0.5),inset 0px 0px 1px rgba(10,1,10,1);
	text-shadow:5px -1px 11px rgba(000,000,000,0),2px 1px 0px rgba(10,1,10,0.3);
    text-decoration:none;
}
.button:hover{
	background:#52F75E;
}
.button:active{
  position:relative;
  top:1px;
}
</style>
     <br>
   <a class="button" href="#">Please Click Me</a>

নিজে করে দেখুন

Blue Gradient Button


 <style>
.button{
    background:#4c77c1;
    background:-webkit-linear-gradient(#4c77c1, #4c77c1 50%, #3660aa 50%, #3660aa);
    background:linear-gradient(#4c77c1, #4c77c1 50%, #3660aa 50%, #3660aa);
    border-radius:6px;
    padding:11px 22px;
    color:#ffffff;
    display:inline-block;
    font:italic 700 22px/1 "Droid Serif", serif;
    text-align:center;
    text-shadow:1px 1px #444444;	
    text-decoration:none;
}
.button:hover{
	background:#ab2cac;
    background:-webkit-linear-gradient(#ab2cac, #ab2cac 50%, #d208d2 50%, #d208d2);
    background:linear-gradient(#ab2cac, #ab2cac 50%, #d208d2 50%, #d208d2);
}
.button:active{
  position:relative;
  top:1px;
}
</style>
     <br>
   <a class="button" href="#">Click Me</a>

নিজে করে দেখুন

White Gradient Button


 <style>
.button{
    background:#ffffff;
    background:-webkit-linear-gradient(#ffffff, #cccccc);
    background:linear-gradient(#ffffff, #cccccc);
    border:1px solid #cccccc;
    border-radius: 1000px;
    box-shadow:0 2px #666666;
    padding:10px 25px;
    color:#000000;
    display:inline-block;
    font:normal 400 18px/1 "Open Sans", sans-serif;
    text-align:center;
    text-shadow:1px 1px #f3f3f3;
    text-decoration:none;
}
.button:hover{
	background:#eeeeee;
}
.button:active{
  position:relative;
  top:1px;
}
</style>
     <br>
   <a class="button" href="#">Click Me</a>

নিজে করে দেখুন

Hotpink Gradient Button


 <style>
.button{
    background:#fb0bee;
    background:-webkit-linear-gradient(#fb0bee, #6a0866);
    background:linear-gradient(#fb0bee, #6a0866);
    border:1px solid #99bc39;
    border-radius:3px;
    padding:12px 24px;
    color:#ffffff;
    display:inline-block;
    font:normal 700 22px/1 "Roboto", sans-serif;
    text-align:center;
    text-shadow:1px 1px #1d011d;
    text-decoration:none;
}
.button:hover{
	background:#660461;
    background:-webkit-linear-gradient(#660461, #f400eb);
    background:linear-gradient(#660461, #f400eb);
}
.button:active{
  position:relative;
  top:1px;
}
</style>
     <br>
   <a class="button" href="#">Click Me</a>

নিজে করে দেখুন

ওয়েব ডিজাইন টিউটোরিয়াল

সিএসএস বাটন (CSS Buttons)

বিস্তারিত ভিডিও সহ দেখুন

কোড উদাহরণ

ফলাফল

Red Gradient Button

Facebook Button

Paracetamol Tablet Button

Orange Black Gradient Button

Nice Border Button

Top Bottom Background Button

Blue Gradient Button

White Gradient Button

Hotpink Gradient Button

রঙের নাম এবং কোড

ঐতিহাসিক কালার থিওরি

http এবং https কি

SEO গাইড লাইন

সকল এইচটিএমএল ট্যাগ

এইচটিএমএল এট্রিবিউট

কিভাবে...?

ওয়েব ডিজাইন টিউটোরিয়াল

সিএসএস বাটন (CSS Buttons)

বিস্তারিত ভিডিও সহ দেখুন

কোড উদাহরণ

ফলাফল

Red Gradient Button

Facebook Button

Paracetamol Tablet Button

Orange Black Gradient Button

Nice Border Button

Top Bottom Background Button

Blue Gradient Button

White Gradient Button

Hotpink Gradient Button

রঙের নাম এবং কোড

ঐতিহাসিক কালার থিওরি

http এবং https কি

SEO গাইড লাইন

সকল এইচটিএমএল ট্যাগ

এইচটিএমএল এট্রিবিউট

সোশ্যাল মিডিয়াতে আমরা

কিভাবে...?