Crear botones estilo admin WordPress

Inicio Foros WordPress Themes y Diseño Crear botones estilo admin WordPress

Este debate contiene 10 respuestas, tiene 2 mensajes y lo actualizó  imported_fliberty hace 8 años, 5 meses.

  • Autor
    Publicaciones
  • #17069

    ivnic
    Participante

    <p>Hola amigos!<br />
    Estoy intentando crear en un blog en diferentres ubicaciones botones al estilo login de wordpress que cuando se pasa el mouse se marca y al hacer clic se hunde.</p>
    <p>He buscado mucho pero sin resultados.<br />
    He intentado creando en css un estilo .button un hover .button:hover y un active .button:active, con imagenes pero no me da resultados.</p>
    <p>si alguien tiene alguna linea que de resultados se lo agradeceria.
    </p>

  • #41950

    imported_fliberty
    Participante

    No entiendo muy bien tu pregunta?
    Pero puedes efectuar diversos formatos a botones u enlaces, utilizando los formatos que ya has mencionado, utilizando sprites o imágenes para cada una de las acciones; por ejemplo, un botón para cuando un enlace o boton está en posición normal, otra para cuando está en modo hover y otra para active.

  • #41970

    ivnic
    Participante

    No encuentro el codigo que utilice para hacerlo para postearlo, pero haber si me explico mejor

    Use las tres funciones anteriores para crear el boton con imagenes, y crear el efecto, por asi decirlo, en modo reposo, cuando pasa el mouse por arriba (hover) y cuando se hunde (active), pero no me funcionaba. Solo quedaba funcionando como boton estatico.

    Por eso preguntaba si alguien tenia alguna linea de codigo, para probarla, es obvio que en algo estaba errando.
    Estos botones harían referencia a un link,

  • #41973

    imported_fliberty
    Participante

    No se si a ti te sirva esto, cuando utilizo algun formato par aplicarle efecto a un enlace, utilizando .boton a:hover el formato no me funciona, pero si funciona aplicándolo directamente de esta forma:

    Espero que sea de ayuda, avisame si te funcionó.

  • #41994

    ivnic
    Participante

    como tendria que llamarlo en el link, como un class en un div?. No la tengo muy clara

    asi es como lo tengo como para probar

  • #41995

    imported_fliberty
    Participante

    Con el formato que muestras sería class, para el id se utiliza #

  • #41996

    ivnic
    Participante

    Lo he solucionado de la siguiente manera:

    Y en css
    [/php]#button {
    display: block;
    width: 70px;
    height: 19px;
    float: right;
    background: url(images/boton.png) no-repeat top;
    margin: -17px 20px 0px 0px;
    }

    #button:hover {
    background: url(images/botonhover.png) no-repeat top;

    }
    #button:active {
    background: url(images/botonactive.png) no-repeat top;
    }[php]

    Solo cambio el color o el tono del botón y el efecto esta muy bueno

    Gracias fliberty, no use lo mismo pero pude encontrar como adaptarlo

  • #41997

    ivnic
    Participante

    No salio Lo he solucionado de la siguiente manera:

    < a id=”button” h ref=”http://miwordpress.com” >< / a >

    Y en css
    #button {
    display: block;
    width: 70px;
    height: 19px;
    float: right;
    background: url(images/boton.png) no-repeat top;
    margin: -17px 20px 0px 0px;
    }

    #button:hover {
    background: url(images/botonhover.png) no-repeat top;

    }
    #button:active {
    background: url(images/botonactive.png) no-repeat top;
    }

    Solo cambio el color o el tono del botón y el efecto esta muy bueno

    Gracias fliberty,

  • #41998

    imported_fliberty
    Participante

    Por eso mismo te decía, si en el div utilizas div class=”boton” ..
    Entonces en el css iría: .boton, pero si en cambio utilizas div id=”boton” sería #boton, no solo aplica al div, si no tmb a cualquier etiqueta que le puedas poner formato.

  • #41999

    ivnic
    Participante

    Si vi tu msj despues gracias

  • #42001

    imported_fliberty
    Participante

    De nada, me alegro que te haya servido, cualquier cosa, estamos para darnos la mano.

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest