Ang button ay isang naki-click na elemento na ginagamit upang magsagawa ng isang partikular na aksyon. Gamit ang CSS, maaari kang magtakda ng iba't ibang estilo ng mga button isa sa mga ito ay upang baguhin ang kulay ng isang button sa pag-click. Maaaring itakda ang kulay ng isang button gamit ang CSS “ :aktibo ” pseudo-class.
Ituturo sa iyo ng blog na ito ang pamamaraan na may kaugnayan sa pagpapalit ng kulay ng button sa pag-click. Para dito, una, alamin ang tungkol sa :active pseudo-class.
Kaya, magsimula tayo!
Ano ang ': aktibo' sa CSS?
Ang pagbabago ng kulay ng button sa pag-click sa CSS ay posible sa tulong ng “ :aktibo ” pseudo-class. Sa HTML, ito ay nagpapahiwatig ng isang elemento na ina-activate kapag ang user ay nag-click dito. Bukod dito, kapag gumagamit ng mouse, magsisimula ang activation kapag pinindot ang mouse key.
Syntax
a : aktibo {
kulay : berde ;
}
“ a ” ay tumutukoy sa elemento ng HTML kung saan ilalapat ang :active na klase.
Tumungo tayo sa isang halimbawa upang maunawaan ang nakasaad na konsepto.
Paano Baguhin ang Kulay ng Button sa Pag-click sa CSS?
Upang baguhin ang kulay ng isang pindutan sa pag-click, lumikha muna ng isang pindutan sa isang HTML file at italaga ang pangalan ng klase ' btn ”.
HTML
< katawan >< pindutan klase = 'btn' > Pindutan < / pindutan >
< / katawan >
Susunod, sa CSS, itakda ang kulay ng button. Upang gawin ito, gagamitin namin ang ' .btn ” para ma-access ang button at itakda ang kulay ng button bilang “ rgb(0, 255, 213) ”.
CSS
.btn {kulay ng background : rgb ( 0 , 255 , 213 ) ;
}
Pagkatapos nito, ilapat ang :active pseudo-class sa button bilang “ .btn:aktibo ” at itakda ang kulay ng button na lalabas sa aktibong estado nito bilang “ rgb(123, 180, 17) ”:
.btn : aktibo {kulay ng background : rgb ( 123 , 180 , 17 ) ;
}
Ipapakita nito ang sumusunod na kinalabasan:
Ngayon, idagdag natin ang heading na may
tag at button na pangalan ng klase ' pindutan ”, sa loob ng tag na .
HTML
< gitna >
< h1 > Baguhin ang kulay ng button < / h1 >
< pindutan klase = 'button' > Pindutin mo ako < / pindutan >
< / gitna >
Susunod, lilipat tayo sa CSS at i-istilo ang button at ilapat ang :active dito. Upang gawin ito, itatakda namin ang istilo ng hangganan bilang ' wala ” at bigyan ng padding bilang “ 15px ”. Pagkatapos nito, itakda ang kulay ng text ng button bilang “ rgb(50, 0, 54) 'at ang background nito bilang' rgb(177, 110, 149) ”, at ang radius nito bilang “ 15px ”:
.button {
hangganan : wala ;
padding : 15px ;
kulay : rgb ( limampu , 0 , 54 ) ;
kulay ng background : rgb ( 177 , 110 , 149 ) ;
hangganan-radius : 15px ;
}
Ipapakita nito ang sumusunod na kinalabasan:
Pagkatapos nito, ilalapat namin ang :aktibong pseudo-class sa pindutan bilang ' .button:aktibo ” at itakda ang kulay ng isang button bilang “ rgb(200, 255, 0) ”:
.button : aktibo {
kulay ng background : rgb ( 200 , 255 , 0 ) ;
}
Sa sandaling ipatupad mo ang lahat ng code sa itaas, pumunta sa HTML file at isagawa ito upang tingnan ang resulta:
Mula sa output, maaari itong maobserbahan kapag ang pindutan ay na-click ang kulay nito ay binago ayon sa tinukoy na RGB color code.
Konklusyon
Upang baguhin ang kulay ng button sa pag-click sa CSS, ang “ :aktibo ” maaaring gamitin ang pseudo-class. Mas partikular, maaari itong kumatawan sa elemento ng button kapag na-activate ito. Gamit ang klase na ito, maaari kang magtakda ng iba't ibang kulay ng button kapag nag-click dito ang mouse. Ipinaliwanag ng artikulong ito ang pamamaraan para sa pagbabago ng kulay ng button sa pag-click sa CSS.
HTML
< gitna >< h1 > Baguhin ang kulay ng button < / h1 >
< pindutan klase = 'button' > Pindutin mo ako < / pindutan >
< / gitna >
Susunod, lilipat tayo sa CSS at i-istilo ang button at ilapat ang :active dito. Upang gawin ito, itatakda namin ang istilo ng hangganan bilang ' wala ” at bigyan ng padding bilang “ 15px ”. Pagkatapos nito, itakda ang kulay ng text ng button bilang “ rgb(50, 0, 54) 'at ang background nito bilang' rgb(177, 110, 149) ”, at ang radius nito bilang “ 15px ”:
.button {hangganan : wala ;
padding : 15px ;
kulay : rgb ( limampu , 0 , 54 ) ;
kulay ng background : rgb ( 177 , 110 , 149 ) ;
hangganan-radius : 15px ;
}
Ipapakita nito ang sumusunod na kinalabasan:
Pagkatapos nito, ilalapat namin ang :aktibong pseudo-class sa pindutan bilang ' .button:aktibo ” at itakda ang kulay ng isang button bilang “ rgb(200, 255, 0) ”:
.button : aktibo {kulay ng background : rgb ( 200 , 255 , 0 ) ;
}
Sa sandaling ipatupad mo ang lahat ng code sa itaas, pumunta sa HTML file at isagawa ito upang tingnan ang resulta:
Mula sa output, maaari itong maobserbahan kapag ang pindutan ay na-click ang kulay nito ay binago ayon sa tinukoy na RGB color code.
Konklusyon
Upang baguhin ang kulay ng button sa pag-click sa CSS, ang “ :aktibo ” maaaring gamitin ang pseudo-class. Mas partikular, maaari itong kumatawan sa elemento ng button kapag na-activate ito. Gamit ang klase na ito, maaari kang magtakda ng iba't ibang kulay ng button kapag nag-click dito ang mouse. Ipinaliwanag ng artikulong ito ang pamamaraan para sa pagbabago ng kulay ng button sa pag-click sa CSS.