সিএসএস এলার্ট বাটন কিভাবে করবেন?
এলার্ট বাটন সাধারণত কোন একটি মেসেজ দেখানোর জন্য ব্যবহৃত হয়। ব্যবহারকারীকে বাটনের রঙের মাধ্যমে মেসেজটি কেমন হবে তার একটি পূর্ব ধারণা দেওয়া হয় বলে এগুলিকে এলার্ট বাটন বলা হয়। যারা বুটস্ট্রাপ ব্যবহার করেন ওরা অল্প কোড লিখে এরকম এলার্ট বাটন পেতে পারেন। তবে আমি এখানে সিএসএস দিয়ে বাটন গুলো করেছি। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>How To Make Aletr Button With CSS</title>
<style>
body{margin:0;padding:0;}
.container{
margin:0 auto;
background-color:aliceblue;
padding:5px 10px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.button {
color:#ffffff;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
border: none;
}
.success {background-color: #4CAF50;}
.success:hover {background-color: #46a049;}
.info {background-color: #2196F3;}
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;}
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;}
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;}
.default:hover {background: #ddd;}
@media (max-width:568px){
.button{margin-bottom:5px;}
}
</style>
</head>
<body>
<div class="container">
<h3>Alert Buttons Example</h3>
<button onclick="alert('This Is Default Button');" class="button default">Default</button>
<button onclick="alert('This Is Success Button');" class="button success">Success</button>
<button onclick="alert('This Is Info Button');" class="button info">Info</button>
<button onclick="alert('This Is Warning Button');" class="button warning">Warning</button>
<button onclick="alert('This Is Danger Button');" class="button danger">Danger</button>
<p>বিঃ দ্রঃ- বাটনে ক্লিক করে দেখুন।</p>
</div>
</body>
</html>
ফলাফল
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন