CSS Button

Matututunan kung paano gamitin ang CSS upang itakda ang estilo ng pindutan.

Basic button style

Example

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Tutustusan ang Sarili

Kulay ng buton

Gamitin ang background-color Pagbabago ng kulay ng likuran ng buton:

Example

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

Tutustusan ang Sarili

Su-kat ng buton

Gamitin ang font-size Pagbabago ng sukat ng font ng buton:

Example

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

Tutustusan ang Sarili

Gamitin ang padding Pagbabago ng panloob na pagpapatag ng buton:

Example

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Tutustusan ang Sarili

Buton na may punggol

Gamitin ang border-radius Ating naglagay ng palapag sa buton:

Example

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

Tutustusan ang Sarili

colored button border

Gamitin ang border pagdagdag ng kulay ng border sa pindutan sa pamamagitan ng

Example

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}
...

Tutustusan ang Sarili

hoverable button


kapag ang mouse ay inilalagay sa ibabaw ng pindutan, gamitin ang :hover mga selector ay maaaring baguhin ang estilo ng pindutan.

mga tip:Gamitin ang transition-duration paglagay ng attribute upang matukoy ang bilis ng 'hover' effect:

Example

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
...

Tutustusan ang Sarili

shadow button

Gamitin ang box-shadow pagdagdag ng shadow sa pindutan sa pamamagitan ng

Example

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Tutustusan ang Sarili

pindutan na binawal

Gamitin ang opacity pagdagdag ng transparency sa pindutan (nilikha ng 'disabled' appearance).

mga tip:Maaari ka ring magdagdag ng attribute na may halaga ng "not-allowed" cursor paglalagay ng attribute, kapag ikaw ay inilalagay ang mouse sa ibabaw ng pindutan, ang attribute na ito ay magpapakita ng "no parking sign" (banal na marka ng pag-iwan):

Example

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

Tutustusan ang Sarili

lapad ng pindutan


Sa likas na halipot, ang laki ng pindutan ay depende sa nilalaman ng teksto (katulad ng lapad ng nilalaman). Gamitin ang width pagbabago ng lapad ng pindutan sa pamamagitan ng

Example

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

Tutustusan ang Sarili

paggugrupo ng pindutan

　

Makita ang labas na layo at magdagdag ng float:leftupang bumuo ng button group:

Example

.button {
  float: left;
}

Tutustusan ang Sarili

Button Group na may Border

　

Gamit border Attribute upang bumuo ng button group na may border:

Example

.button {
  float: left;
  border: 1px solid green;
}

Tutustusan ang Sarili

Vertical Button Group

Gamit display:block Pagsuhiwalay float:left Magkakasamang magbukas ang mga button sa ibabaw, hindi sa pabalik-balik:

Example

.button {
  display: block;
}

Tutustusan ang Sarili

Button sa Imahen

Kape

Tutustusan ang Sarili

Animation Button

Example 1

Magdagdag ng Sipay sa Pag-hover ng Mouse:

Tutustusan ang Sarili

Example 2

Magdagdag ng Epekto ng 'Key Press' sa Pag-click:

Tutustusan ang Sarili

Example 3

Fade In sa Pag-hover:

Tutustusan ang Sarili

Example 4

Magdagdag ng Epekto ng 'Ripple' sa Pag-click:

Tutustusan ang Sarili