[SOLUCIONADO] Diferenciar el css de dos botones.

[satjaen]

Hola tengo un dialogo alert que funciona bien, tiene dos botones (Aceptar y Cancelar) pero al pulsar en cualquiera de ellos se iluminan los dos y quisiera que solo se iluminara solo el deseas señalar en ese momento. Como puedo distinguirlos ?


css

Código CSS:

#popup_container.button:hover  INPUT[type='button']
 {
    background: #206bcb;
    background-image: linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -o-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -moz-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -webkit-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -ms-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #206ACB),color-stop(1, #3E9DE5));
    background-clip: padding-box!important;
    border-top: 1px solid #2a73a6!important;
    border-right: 1px solid #165899!important;
    border-bottom: 1px solid #07428f!important;
    border-left: 1px solid #165899!important;
    box-shadow: inset 0 1px 0 0 #62b1e9!important;
    cursor: pointer!important;
    text-shadow: 0 -1px 1px #1d62ab!important;
    color: #FFF!important; 
  }
 
#popup_container.button INPUT[type='button'] {
 
    background:#e5e5e5;
    display:inline-block;
    margin:0 6px;
    padding:7px 20px 7px;
    color:#333;
    text-decoration:none;
    text-shadow: 0 1px 1px #FFF;
    border:1px solid #ccc;
 
    /* Bordes redondenados - Border Radius */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
 
    /* Fondo Degradado - Background Gradient */
    background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
    background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
    background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
    background:        linear-gradient(top, #fefefe, #e5e5e5);
 
    /* Aplcamos sombras al boton - Box Shadow */
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 
    /* Animacion - Transition */
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
  
  {
 

Código Javascript:

$.alerts = {
        
        // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
        
        verticalOffset: -75,                // vertical offset of the dialog from center screen, in pixels
        horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels/
        repositionOnResize: true,           // re-centers the dialog on window resize
        overlayOpacity: .01,                // transparency level of overlay
        overlayColor: '#FFF',               // base color of overlay
        draggable: true,                    // make the dialogs draggable (requires UI Draggables plugin)
        okButton: ' Aceptar ',         // text for the OK button
        cancelButton: ' Cancelar ', // text for the Cancel button
        dialogClass: 'button',
 

Código Javascript:

case 'confirm':
                    $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /><input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
 

Muchas gracias

[maycolalvarez]

coloca la psudoclase :hover al final, si la colocas así le das a entender que aplica para todos los .button