Aktif/Pasif şeklinde buton nasıl yapabilirim

Merhabalar,

videolar için hazırladığım sayfada ekranı karart ve aydınlat şeklinde buton yapmak istiyorum. " <span class="karart"></span> " şeklinde buton hazırladım ve css tanımladım, ancak bu butona hareket vermeyi bilmiyorum. yani ben şimdi nasıl bu butona tıklandığında yazdığım css'yi aktif edip butonun değişmesini ve css nin aktif olmasını sağlayabilirim, tekrar tıklandığında ise tekrar eski buton görünecek ve css pasif olacak ?

Merhabalar,
Jquery ile yapabilirsiniz

Yapmak istediğiniz şu da olabilir.

https://proto.io/freebies/onoff/

http://api.jquery.com/css/ ve http://codepen.io/cssjockey/pen/jGzuK adresinde ornekler var

Yok on off butonu değil, ben anlatamadım ne istediğimi. http://www.bozuktus.com/starcraft-ii...i-bt11078.html adresinde http://prntscr.com/902a8i iki tane buton var. Bunlardan biri tıklandığında video hariç sitenin geri kalan alanlarını karartacak (dizi film istenildiğinde gibi), diğeri ise Videoyu temanın genişliğine getirecek. Bu iconlara tıklandığında yapılan işlem geri alınacak.

Örnek olarak üstteki reklamı gizle, reklamı göster butonu gibi.