Author Topic: Dar estilo a los botones de un alert con jquery.  (Read 7831 times)

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Dar estilo a los botones de un alert con jquery.
« on: Noviembre 17, 2013, 05:39:23 am »
Hola, quiero cambiar el estilo y tamaño de los botones (Aceptar y Cancelar) de un alert. Como puedo hacerlo ?

Este es el código :

Quote
$.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: null,                  // if specified, this class will be applied to all dialogs
      


Gracias

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: Dar estilo a los botones de un alert con jquery.
« Reply #1 on: Noviembre 17, 2013, 11:53:31 am »
Hola:

En principio bastaría con $.alerts.dialogClass="unClassDeEstilo"

y hace el css para que los input submit (los botones) dentro de ese class tengan lo que tu quieras

#popup_container.UnClassDeEstilo INPUT[type='button'] {
            border: outset 2px #76A5CC;
            color: #A4C6E2;
            background: #3778AE;
         }

El código que he puesto sale de mirar el fuente de esta página http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #2 on: Noviembre 17, 2013, 04:43:58 pm »
Perdona, pero te tenía que haber puesto el ejemplo completo:

index.html
Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jAlert, substituto del alert(), confirm() y prompt() en jQuery</title>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript" src="jquery-mobile/jquery-1.6.4.min.js"></script>
<link href="jquery.alerts-1.1/jquery.alerts.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
// jQuery Alert Dialogs Plugin
//
// Version 1.1
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
//
// Visit http://abeautifulsite.net/notebook/87 for more information
//
// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )
//
// History:
//
//      1.00 - Released (29 December 2008)
//
//      1.01 - Fixed bug where unbinding would destroy all resize events
//
// License:
//
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC.
//
(function($) {
   
   $.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: '&nbsp;Aceptar&nbsp;',         // text for the OK button
                cancelButton: '&nbsp;Cancelar&nbsp;', // text for the Cancel button
      dialogClass: null,                  // if specified, this class will be applied to all dialogs
      
      // Public methods
      
      alert: function(message, title, callback) {
         if( title == null ) title = 'Alert';
         $.alerts._show(title, message, null, 'alert', function(result) {
            if( callback ) callback(result);
         });
      },
      
      confirm: function(message, title, callback) {
         if( title == null ) title = 'Confirm';
         $.alerts._show(title, message, null, 'confirm', function(result) {
            if( callback ) callback(result);
         });
      },
         
      prompt: function(message, value, title, callback) {
         if( title == null ) title = 'Prompt';
         $.alerts._show(title, message, value, 'prompt', function(result) {
            if( callback ) callback(result);
         });
      },
      
      // Private methods
      
      _show: function(title, msg, value, type, callback) {
         
         $.alerts._hide();
         $.alerts._overlay('show');
         
         $("BODY").append(
           '<div id="popup_container">' +
             '<h1 id="popup_title"></h1>' +
             '<div id="popup_content">' +
               '<div id="popup_message"></div>' +
            '</div>' +
           '</div>');
         
         if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);
         
         // IE6 Fix
         var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed';
         
         $("#popup_container").css({
            position: pos,
            zIndex: 99999,
            padding: 0,
            margin: 0
         });
         
         $("#popup_title").text(title);
         $("#popup_content").addClass(type);
         $("#popup_message").text(msg);
         $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );
         
         $("#popup_container").css({
            minWidth: $("#popup_container").outerWidth(),
            maxWidth: $("#popup_container").outerWidth()
         });
         
         $.alerts._reposition();
         $.alerts._maintainPosition(true);
         
         switch( type ) {
            case 'alert':
               $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
               $("#popup_ok").click( function() {
                  $.alerts._hide();
                  callback(true);
               });
               $("#popup_ok").focus().keypress( function(e) {
                  if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
               });
            break;
            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>');
               $("#popup_ok").click( function() {
                  $.alerts._hide();
                  if( callback ) callback(true);
               });
               $("#popup_cancel").click( function() {
                  $.alerts._hide();
                  if( callback ) callback(false);
               });
               $("#popup_ok").focus();
               $("#popup_ok, #popup_cancel").keypress( function(e) {
                  if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                  if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
               });
            break;
            case 'prompt':
               $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
               $("#popup_prompt").width( $("#popup_message").width() );
               $("#popup_ok").click( function() {
                  var val = $("#popup_prompt").val();
                  $.alerts._hide();
                  if( callback ) callback( val );
               });
               $("#popup_cancel").click( function() {
                  $.alerts._hide();
                  if( callback ) callback( null );
               });
               $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
                  if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                  if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
               });
               if( value ) $("#popup_prompt").val(value);
               $("#popup_prompt").focus().select();
            break;
         }
         
         // Make draggable
         if( $.alerts.draggable ) {
            try {
               $("#popup_container").draggable({ handle: $("#popup_title") });
               $("#popup_title").css({ cursor: 'move' });
            } catch(e) { /* requires jQuery UI draggables */ }
         }
      },
      
      _hide: function() {
         $("#popup_container").remove();
         $.alerts._overlay('hide');
         $.alerts._maintainPosition(false);
      },
      
      _overlay: function(status) {
         switch( status ) {
            case 'show':
               $.alerts._overlay('hide');
               $("BODY").append('<div id="popup_overlay"></div>');
               $("#popup_overlay").css({
                  position: 'absolute',
                  zIndex: 99998,
                  top: '0px',
                  left: '0px',
                  width: '100%',
                  height: $(document).height(),
                  background: $.alerts.overlayColor,
                  opacity: $.alerts.overlayOpacity
               });
            break;
            case 'hide':
               $("#popup_overlay").remove();
            break;
         }
      },
      
      _reposition: function() {
         var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
         var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
         if( top < 0 ) top = 0;
         if( left < 0 ) left = 0;
         
         // IE6 fix
         if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();
         
         $("#popup_container").css({
            top: top + 'px',
            left: left + 'px'
         });
         $("#popup_overlay").height( $(document).height() );
      },
      
      _maintainPosition: function(status) {
         if( $.alerts.repositionOnResize ) {
            switch(status) {
               case true:
                  $(window).bind('resize', $.alerts._reposition);
               break;
               case false:
                  $(window).unbind('resize', $.alerts._reposition);
               break;
            }
         }
      }
      
   }
   
   // Shortuct functions
   jAlert = function(message, title, callback) {
      $.alerts.alert(message, title, callback);
   }
   
   jConfirm = function(message, title, callback) {
      $.alerts.confirm(message, title, callback);
   };
      
   jPrompt = function(message, value, title, callback) {
      $.alerts.prompt(message, value, title, callback);
   };
   
})(jQuery);

</script>

<script type="text/javascript">
$(document).ready(function(){
   $('#boton_alert').click(function() {
      alert("Actualidad jQuery");
   });
   $('#boton_confirm').click(function() {
      if(confirm("¿Te gusta Actualidad jQuery?")) {
         alert("Te gusta Actualidad jQuery");
      } else {
         alert("No te gusta Actualidad jQuery");
      }
   });
   $('#boton_prompt').click(function() {
      variable = prompt("Introduce tu nombre","");
      alert("Tu nombre es "+variable);
   });
   $('#boton_jalert').click(function() {
      jAlert("Actualidad jQuery", "Actualidad jQuery");
   });
   $('#boton_jconfirm').click(function() {
      jConfirm("¿Te gusta Actualidad jQuery?", "Actualidad jQuery", function(r) {
         if(r) {
            jAlert("Te gusta Actualidad jQuery", "Actualidad jQuery");
         } else {
            jAlert("No te gusta Actualidad jQuery", "Actualidad jQuery");
         }
      });
   });
   $('#boton_jprompt').click(function() {
      jPrompt("Introduce tu nombre", "", "Actualidad jQuery", function(r) {
         if(r) {
            jAlert("Tu nombre es "+r, "Actualidad jQuery");
         }
      });
   });
});
</script>
<style type="text/css">

.html, body {
   font-family:Verdana, Geneva, sans-serif;
   font-size:12px;
}

.inicio {
   width:600px;
   height:100%;
   padding:0px;
   margin:0px auto 0px auto;
}

</style>
</head>
<body>
<div class="inicio">
jAlert, substituto del alert(), confirm() y prompt() en jQuery<br /><br />
Javascript
<br /><br />
<input type="button" id="boton_alert" value="alert()" />
<input type="button" id="boton_confirm" value="confirm()" />
<input type="button" id="boton_prompt" value="prompt()" />
<br /><br />
jQuery + jAlert
<br /><br />
<input type="button" id="boton_jalert" value="jAlert()" />
<input type="button" id="boton_jconfirm" value="jConfirm()" />
<input type="button" id="boton_jprompt" value="jPrompt()" />
</div>
 </body>
</html>

jquery.alerts.css
Quote
#popup_container {
   font-family: Arial, sans-serif;
   font-size: 14px;
   font-weight: bold;
   min-width: 300px; /* Dialog will be no smaller than this */
   max-width: 350px; /* Dialog will wrap after this width */
   height: 150px;
   background: #FFF;
   border: solid 5px #999;
   color: #000;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
}

#popup_title {
   font-size: 16px;
   font-weight: bold;
   text-align: center;
   line-height: 1.75em;
   color: #666;
   background: #CCC url(images/title.gif) top repeat-x;
   border: solid 1px #FFF;
   border-bottom: solid 1px #999;
   cursor: default;
   padding: 0em;
   margin: 0em;
}

#popup_content {
   background: 16px 16px no-repeat url(images/info.gif);
   padding: 1em 1.75em;
   margin: 0em;
}

#popup_content.alert {
   background-image: url(images/info.gif);
}

#popup_content.confirm {
   background-image: url(images/important.gif);
}

#popup_content.prompt {
   background-image: url(images/help.gif);
}

#popup_message {
   padding-left: 48px;
}

#popup_panel {
   text-align: center;
   margin: 1em 0em 0em 1em;
}

#popup_prompt {
   margin: .5em 0em;
}
« Last Edit: Noviembre 17, 2013, 04:49:08 pm by satjaen »

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: Dar estilo a los botones de un alert con jquery.
« Reply #3 on: Noviembre 17, 2013, 08:51:32 pm »
No, el ejemplo completo sobra, da pereza mirarlo.

¿Dónde tienes el CSS para cambiar los botones?

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #4 on: Noviembre 17, 2013, 08:59:33 pm »
Te lo he puesto. Es jquery.alerts.css

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: Dar estilo a los botones de un alert con jquery.
« Reply #5 on: Noviembre 18, 2013, 12:02:56 am »
Sí, el css lo he visto, lo que no veo dentro del css es dónde está el cambio en el estilo de los botones.

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #6 on: Noviembre 18, 2013, 12:33:58 am »
Ah perdona lo he puesto así:

Quote
$.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: '&nbsp;Aceptar&nbsp;',         // text for the OK button
      cancelButton: '&nbsp;Cancelar&nbsp;', // text for the Cancel button
      dialogClass: 'popup_ok',       

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

Quote
#popup_container.popup_ok INPUT[type='button'] {
           

         }

Como puedo hacer el css para que los botones se vean como en la foto adjunta ?:


Lo he intentedo con data-role="button" pero no funciona:

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

« Last Edit: Noviembre 18, 2013, 01:26:20 am by satjaen »

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: Dar estilo a los botones de un alert con jquery.
« Reply #7 on: Noviembre 18, 2013, 11:33:50 am »
Hola:

El CSS de los botones está vacío.

Aparte, en ese CSS, esto "#popup_container.popup_ok INPUT[type='button']" no está bien, te sobra o bien popup_ok, o bien INPUT[type='button'], ya que ambos referencian al boton y si pones los dos así  como los tienes, estás buscando un botón dentro de un botón.

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #8 on: Noviembre 18, 2013, 03:29:58 pm »
Ok, ya lo he modificado. Y el css esta vacio porque no se que ponerle para que salga como en la imagen que te puse en el post anterior.

Quote
#popup_container.popup_ok{
   
}

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #9 on: Noviembre 18, 2013, 05:16:06 pm »
Lo he conseguido, pero al pulsar uno de los dos botones se iluminan los dos cuando debería de iluminarse el que estas señalando no ?

css
Quote
#popup_container.button:hover INPUT[type='button']
 {
 border-color:#adcce2; /* Modificamos el color del borde */
 
    /* Cambiamos los colores del fondo degradado */
    background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */
    background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */
    background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */
    background:        linear-gradient(top, #fefefe, #f1f1f1);
 
    /* Modificamos las propiedades del Box Shadow para un efecto Glow */
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);
    -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
    box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
  }

#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;
 
  {

« Last Edit: Noviembre 18, 2013, 05:26:13 pm by satjaen »

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #10 on: Noviembre 19, 2013, 06:01:16 am »
Perdona, no se sí me he explicado. Es diferenciar cual de los dos botones estoy pulsando.

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: Dar estilo a los botones de un alert con jquery.
« Reply #11 on: Noviembre 19, 2013, 03:10:08 pm »
Ponle un class o  un id distinto a cada botón y pon el CSS con ese class/id. De hecho, parece que ya lo tienes y se llaman id popup_ok e id popup_cancel

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #12 on: Noviembre 19, 2013, 03:12:01 pm »
Gracias, pero eso es lo que intento y no me sale.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: Dar estilo a los botones de un alert con jquery.
« Reply #13 on: Noviembre 19, 2013, 03:41:17 pm »
Ya esta, es que me había liado. Yo pensaba que en dialogClass: 'null', había que poner la clase de los botones. :)

Quote
$.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: '&nbsp;Aceptar&nbsp;',         // text for the OK button
      cancelButton: '&nbsp;Cancelar&nbsp;', // text for the Cancel button
      dialogClass: 'null',       




Quote
#popup_ok:hover,
#popup_cancel:hover
 {
    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_ok,
#popup_cancel {
 
    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;
 
  {
    
 

Seré bueno.

 

ey