কম্পিউটার

কিভাবে CSS দিয়ে টেক্সট বোতাম স্টাইল করবেন?


CSS −

এর সাথে টেক্সট বোতাম স্টাইল করার কোড নিচে দেওয়া হল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
   border: none;
   color: white;
   font-weight: bolder;
   padding: 20px;
   font-size: 18px;
   cursor: pointer;
   border-radius: 6px;
}
.Success {
   color: #4caf50;
}
.Success:hover {
   background: #e7e7e7;
}
.Info {
   color: #2196f3;
}
.Info:hover {
   background: #e7e7e7;
}
.Warning {
   color: #ff9800;
}
.Warning:hover {
   background: #e7e7e7;
}
.Danger {
   color: #f44336;
}
.Danger:hover {
   background: #e7e7e7;
}
.Default {
   color: black;
}
.Default:hover {
   background: #e7e7e7;
}
</style>
</head>
<body>
<h1>Text Buttons Example</h1>
<button class="Success">Success</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Danger">Danger</button>
<button class="Default">Default</button>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে টেক্সট বোতাম স্টাইল করবেন?


  1. কিভাবে CSS দিয়ে একটি hr উপাদান স্টাইল করবেন?

  2. কিভাবে CSS দিয়ে লেবেল স্টাইল করবেন?

  3. কিভাবে CSS দিয়ে একটি উজ্জ্বল লেখা তৈরি করবেন?

  4. কিভাবে CSS দিয়ে হেডার স্টাইল করবেন?