CSS Styling Buttons

CSS உடன், வெவ்வேறு HTML பொத்தான்கள் பல வழிகளில் அலங்கரிக்கப்படலாம்.

பொத்தான்களை அலங்கரிக்க மிகவும் பொதுவான CSS பண்புகள்:

background-color - ஒரு பொத்தானின் பின்னணி நிறத்தை வரையறுக்கிறது
color - ஒரு பொத்தானின் உரை நிறத்தை வரையறுக்கிறது
border - ஒரு பொத்தானின் எல்லையை வரையறுக்கிறது
padding - உரை மற்றும் பொத்தானின் எல்லைக்கு இடையே உள்ள இடத்தை வரையறுக்கிறது
border-radius - ஒரு பொத்தானுக்கு வட்டமான மூலைகளை சேர்க்கிறது
box-shadow - ஒரு பொத்தானுக்கு நிழல்களை சேர்க்கிறது
text-align - ஒரு பொத்தானின் உரையை மையப்படுத்துகிறது
font-size - ஒரு பொத்தானில் உள்ள உரையின் எழுத்துரு அளவை வரையறுக்கிறது
text-decoration - பொத்தான்களாக பயன்படுத்தப்படும் <a> உறுப்புகளுக்கான அடிக்கோட்டை அகற்றுகிறது
cursor - பொத்தானின் மேல் சுட்டியை நகர்த்தும்போது சுட்டி கர்சரை மாற்றுகிறது

CSS Basic Button Styling

.button {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

CSS Button Colors

.button1 {background-color: #04AA6D;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

CSS Button Sizes

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

CSS Rounded Buttons

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

CSS Button Borders

CSS Hoverable Buttons

.button1:hover {background-color: #04AA6D;color: white;}
.button2:hover {background-color: #008CBA;color: white;}
.button3:hover {background-color: #f44336;color: white;}
.button4:hover {background-color: #e7e7e7;color: black}
.button5:hover {background-color: #555555;color: white;}

CSS Buttons With Shadow

CSS Disabled Button

.disabledbtn {
  opacity: 0.6;
  cursor: not-allowed;
}

CSS Button Width

CSS Horizontal Button Group

CSS Bordered Button Group

CSS Vertical Button Group

Button on Image

Exercise

❓ பொத்தானின் பின்னணி நிறத்தை மாற்ற எந்த CSS பண்பு பயன்படுத்தப்படுகிறது?

background-color

✓ சரி!

color

✗ தவறு!

border-color

✗ தவறு!

font-color

✗ தவறு!