CSS Buttons

By /

CSS বোতাম

HTML-এ, আমরা একটি বোতাম তৈরি করতে বোতাম ট্যাগ ব্যবহার করি, কিন্তু CSS বৈশিষ্ট্য ব্যবহার করে, আমরা বোতামগুলিকে স্টাইল করতে পারি। বোতাম আমাদের ব্যবহারকারীর মিথস্ক্রিয়া এবং ইভেন্ট প্রক্রিয়াকরণ তৈরি করতে সাহায্য করে। এগুলি ওয়েব পৃষ্ঠাগুলির বহুল ব্যবহৃত উপাদানগুলির মধ্যে একটি।

ফর্ম জমা দেওয়ার সময়, কিছু তথ্য দেখতে বা পেতে, আমরা সাধারণত বোতাম ব্যবহার করি।

চলুন বোতামে মৌলিক স্টাইলিং দেখি।

বোতামে মৌলিক স্টাইলিং

বোতাম উপাদান শৈলী ব্যবহার করা হয় যে একাধিক বৈশিষ্ট্য উপলব্ধ আছে. এক এক করে সেগুলো নিয়ে আলোচনা করা যাক।

পেছনের রং

যেমনটি আমরা আগে আলোচনা করেছি, এই বৈশিষ্ট্যটি বোতাম উপাদানটির পটভূমির রঙ সেট করার জন্য ব্যবহৃত হয়।

বাক্য গঠন

  1. element {  
  2.     // background-color style  
  3. }  

উদাহরণ

  1. <!DOCTYPE html>    
  2. </html> 
  3. </head>    
  4.     </title>   
  5.         button background Color   
  6.     </title>   
  7.         
  8.     <style>   
  9.     body{  
  10.        text-align: center;  
  11.     }  
  12.         button {  
  13.            color:lightgoldenrodyellow;  
  14.             font-size: 30px;   
  15.         }   
  16.         .b1 {   
  17.             background-color: red;   
  18.         }   
  19.         .b2 {   
  20.             background-color: blue;   
  21.         }   
  22.         .b3 {   
  23.             background-color: violet;   
  24.         }   
  25.     </style>   
  26. </head>   
  27.     
  28. <body>    
  29.    <h1>The background-color property.</h1>  
  30.     <button class=“b1”>Red color button</button>   
  31.     <button class=“b2”>Blue color button</button>   
  32.     <button class=“b3”>Violet color button</button>   
  33. </body>    
  34. </html>    

সীমান্ত

এটি বোতামের সীমানা সেট করতে ব্যবহৃত হয়। এটি সীমানা-প্রস্থ, সীমানা-রঙ এবং সীমানা-শৈলীর জন্য শর্টহ্যান্ড সম্পত্তি।

বাক্য গঠন

  1. element {  
  2.     // border style  
  3. }  

উদাহরণ

  1. <!DOCTYPE html>    
  2. </html>   
  3. </head>    
  4.  </title>   
  5.         button background Color   
  6.     </title>   
  7.         
  8.     <style>   
  9.     body{  
  10.        text-align: center;  
  11.     }  
  12.         button {  
  13.            color:lightgoldenrodyellow;  
  14.             font-size: 30px;   
  15.         }   
  16.         .b1 {   
  17.             background-color: red;   
  18.             border:none;  
  19.         }   
  20.         .b2 {   
  21.             background-color: blue;   
  22.             border:5px brown solid;  
  23.         }   
  24.         .b3 {   
  25.             background-color: yellow;   
  26.             color:black;  
  27.             border:5px red groove;  
  28.         }   
  29.         .b4{  
  30.            background-color:orange;  
  31.            border: 5px red dashed;  
  32.         }  
  33.         .b5{  
  34.            background-color: gray;  
  35.            border: 5px black dotted;  
  36.         }  
  37.         .b6{  
  38.            background-color: lightblue;  
  39.            border:5px blue double;       
  40.         }  
  41.     </style>   
  42. </head>   
  43.     
  44. <body>    
  45.    <h1>The border property</h1>  
  46.     <button class=“b1”>none</button>   
  47.     <button class=“b2”>solid</button>   
  48.     <button class=“b3”>groove</button>   
  49.     <button class=“b4”>dashed</button>   
  50.     <button class=“b5”>dotted</button>  
  51.     <button class=“b6”>double</button>     
  52.     </body>    
  53.     </html>  

সীমানা-ব্যাসার্ধ

এটি বোতামের বৃত্তাকার কোণগুলি তৈরি করতে ব্যবহৃত হয়। এটি বোতামের সীমানা ব্যাসার্ধ সেট করে।

বাক্য গঠন

  1. element {  
  2.     // border-radius property  
  3. }  

উদাহরণ

 
  1. <!DOCTYPE html>    
  2. </html> 
  3. </head>    
  4.  </title>   
  5.         button background Color   
  6.     </title>   
  7.         
  8.     <style>   
  9.     body{  
  10.        text-align: center;  
  11.     }  
  12.         button {  
  13.            color:lightgoldenrodyellow;  
  14.             font-size: 30px;   
  15.         }   
  16.         .b1 {   
  17.             background-color: red;   
  18.             border:none;  
  19.         }   
  20.         .b2 {   
  21.             background-color: blue;   
  22.             border:5px brown solid;  
  23.             border-radius: 7px;  
  24.         }   
  25.         .b3 {   
  26.             background-color: yellow;   
  27.             color:black;  
  28.             border:5px red groove;  
  29.             border-radius: 10px;  
  30.         }   
  31.         .b4{  
  32.            background-color:orange;  
  33.            border: 5px red dashed;  
  34.            border-radius: 20px;  
  35.         }  
  36.         .b5{  
  37.            background-color: gray;  
  38.            border: 5px black dotted;  
  39.            border-radius: 30px;  
  40.         }  
  41.         .b6{  
  42.            background-color: lightblue;  
  43.            border:5px blue double;       
  44.            border-radius: 25px;  
  45.         }  
  46.     </style>   
  47. </head>   
  48.     
  49. <body>    
  50.    <h1>The border-radius property</h1>  
  51.    <h2>Below there is the border name and border-radius</h2>  
  52.     <button class=“b1”>none</button>   
  53.     <button class=“b2”>solid 7px</button>   
  54.     <button class=“b3”>groove 10px</button>   
  55.     <button class=“b4”>dashed 20px</button>   
  56.     <button class=“b5”>dotted 30px</button>  
  57.     <button class=“b6”>double 25px</button> 
  58. </body>    
  59. </html>  

বক্স-ছায়া

এর নাম থেকে বোঝা যায়, এটি বোতাম বাক্সের ছায়া তৈরি করতে ব্যবহৃত হয়। এটি বোতামে ছায়া যোগ করতে ব্যবহৃত হয়। বোতামে হোভার করার সময় আমরা একটি ছায়াও তৈরি করতে পারি।

বাক্য গঠন

  1. box-shadow: [horizontal offset] [vertical offset] [blur radius]   
  2.             [optional spread radius] [color];  

উদাহরণ

  1. <!DOCTYPE html>    
  2. <html>    
  3. </head>    
  4. </title>   
  5.    button background Color   
  6.     </title>       
  7.     </style>   
  8.     body{  
  9.     text-align: center;  
  10.     }  
  11.         button {  
  12.         color:lightgoldenrodyellow;  
  13.        font-size: 30px;   
  14.         }   
  15.         .b1{  
  16.            background-color: lightblue;  
  17.            border:5px red double;       
  18.            border-radius: 25px;  
  19.            color:black;  
  20.            box-shadow : 0 8px 16px 0 black,   
  21.            0 6px 20px  0 rgba(0, 0, 0, 0.19);   
  22.         }  
  23.        .b2{  
  24.        background-color: lightblue;  
  25.        border:5px red dotted;       
  26.        color:black;  
  27.        border-radius: 25px;  
  28.         }  
  29.         .b2:hover{  
  30.          box-shadow : 0 8px 16px 0 black,   
  31.         0 6px 20px  0 rgba(0, 0, 0, 0.19);   
  32.         }  
  33. </style>   
  34. </head>       
  35. <body>    
  36.     <button class=“b1”>Shadow on button</button>    
  37.     <button class=“b2”>Box-shadow on hover</button>  
  38. </body>    
  39. </html>  

প্যাডিং

এটি বোতাম প্যাডিং সেট করতে ব্যবহৃত হয়।

বাক্য গঠন

  1. element {  
  2.     // padding style  
  3. }  

আসুন একটি উদাহরণ ব্যবহার করে এটি বুঝতে পারি।

উদাহরণ

  1. <!DOCTYPE html>    
  2. </html>    
  3. </head>    
  4. </title>   
  5.         button background Color   
  6.  </title>       
  7.  </style>   
  8.     body{  
  9.        text-align: center;  
  10.     }  
  11.         button {  
  12.            color:lightgoldenrodyellow;  
  13.             font-size: 30px;   
  14.         }   
  15.         .b1 {   
  16.             background-color: red;   
  17.             border:none;  
  18.             padding: 16px;  
  19.         }   
  20.         .b2 {   
  21.             background-color: blue;   
  22.             border:5px brown solid;  
  23.             padding:15px 30px 25px 40px;  
  24.         }   
  25.         .b3 {   
  26.             background-color: yellow;   
  27.             color:black;  
  28.             border:5px red groove;  
  29.             padding-top:30px;  
  30.         }   
  31.         .b4{  
  32.            background-color:orange;  
  33.            border: 5px red dashed;  
  34.            padding-bottom:40px;  
  35.         }  
  36.         .b5{  
  37.            background-color: gray;  
  38.            border: 5px black dotted;  
  39.            padding-left: 40px;  
  40.         }  
  41.         .b6{  
  42.            background-color: lightblue;  
  43.            border:5px blue double;       
  44.            padding-right: 40px;;  
  45.         }  
  46.     </style>   
  47. </head>   
  48.     
  49. <body>    
  50.    <h1>The padding property</h1>  
  51.     <button class=“b1”>none</button>   
  52.     <button class=“b2”>solid</button>   
  53.     <button class=“b3”>groove</button>   
  54.     <button class=“b4”>dashed</button>   
  55.     <button class=“b5”>dotted</button>  
  56.     <button class=“b6”>double</button>   
  57.   
  58. </body>    
  59. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top