<div class="buton mavi">BUTON 1</div>
<div class="buton mavi">BUTON 2</div>
<div class="buton mavi">BUTON 3</div>



<div style="display:inline-block; clear:both; float:left; margin-top:30px;">

<div class="cevir b1">Butonların Hoverlarını Kırmızıya Çevir</div>
<div class="cevir b2">Butonların Hoverlarını Yeşile Çevir</div>
<div class="bilgi">Butonlara tıklayarak hoverları değiştirebilirsiniz....</div>
</div>

.buton{

height:30px;
float:left;
font-family:arial;
padding:2px 8px;
margin:3px;
border-radius:3px;
line-height:30px
}

.mavi{
background:#5785e3;
color:#fff;
}

.mavi:hover{
background:#3b64b6;
color:#fff;
cursor:pointer;
}

.kirmizi{
background:#5785e3;
color:#fff;
}

.kirmizi:hover{
background:#ff1010;
color:#fff;
cursor:pointer;
}

.yesil{
background:#5785e3;
color:#fff;
}

.yesil:hover{
background:#43b423;
color:#fff;
cursor:pointer;
}

.cevir{
background:#ffa900;
float:left;
margin-right:10px;
padding:3px 12px;
height:30px;
line-height:30px;
border-radius:3px;
color:#fff;
font-family:arial;
cursor:pointer;
}

.bilgi{
color:#888;
margin-top:10px;
display:inline-block;
font-family:tahoma;
font-size:13px;
}

$(".b1").click(function(){

$(".buton").removeClass("mavi yesil").addClass("kirmizi");
$(".bilgi").text("Hoverlar kırmızı oldu, test edin...");
});

$(".b2").click(function(){

$(".buton").removeClass("kirmizi mavi").addClass("yesil");
$(".bilgi").text("Hoverlar yeşil oldu, test edin...");
});