Botones y menus en CSS3 y HTML5 muy juveniles y actuales

Estos botones estan creados de una forma y estilo sexy y juveniles, espero les guste.

Les pueden dar un sin fin de utilidad en su web.

COMPATIBLES CON:

Versiónes actuales de Safari, Chrome y Firefox son compatibles.

Ejemplo de botones css3/html5

Este es el codigo css del boton primero debes colocar este codigo en el HEAD de tu web y luego colocas el codigo del menu o boton que te guste.

EN UN WIDGET

 

  1. Haz clic en "Ajustes"
  2. Haz clic en "Editar head" en la sección página web
  3. Introduce el código css correspondiente


 


 


Este es el head

Estilo css de botones en html5 actualizados septiembre del 2014

smiley

      Copia y pega este estilo en el head de tu pagina web

<link rel="stylesheet" type="text/css" href="http://menuscss.net84.net/jimdo/botons/css3_html5/buttons.css" />

Mira el video Turorial


aqui encuentras el widget/html ahi colocas los codigos de abajo

Tu le puedes cambia el color esta es la tabla:

blue es igual al color: celeste

orange es igual al color: Naraja

pink es igual al color: pink

green  es igual al color: green

transparent es igual al color: gris o plomo

En el # Insertar el link o url de tu pagina

 

El icono o simbolo lo elijes aqui solo copia y pega

King Queen Horse menu1 menu2 menu3

Boton Marcado

<div id="buttons">


  <!-- www.disemucho.net -->     <ul>
        <li>
            <a title="Link 1" href="#" class="button">Home</a>
        </li>

        <li>
            <a title="Link 5" href="#" class="button">Contacto</a>
        </li>
    </ul>
</div>

Menu marcado de colorido

<div id="buttons">


  <!-- www.disemucho.net-->     <ul>
        <li>
            <a title="Link 1" href="#" class="button orange glossy">Inicio</a>
        </li>

        <li>
            <a title="Link 5" href="#" class="button orange glossy">Contacto</a>
        </li>
    </ul>
</div>


Caballos

<a href="#" id="dr2" class="button blue skew" name="dr2">Caballos</a> <script type="text/javascript" language="javascript">

  <!-- www.disemucho.net-->


//<![CDATA[
                  var nodo = document.getElementById('dr2');
                  nodo.setAttribute('data-icon', '♞');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>


musica

<a href="#" id="dr1" class="button pink serif round glass" name="dr1">musica</a> <script type="text/javascript" language="javascript">

  <!-- www.disemucho.net-->
//<![CDATA[
                  var nodo = document.getElementById('dr1');
                  nodo.setAttribute('data-icon', '♫');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>

Stars

<a href="#" id="dr4" class="button orange shield glossy" name="dr4">Stars</a> <script type="text/javascript" language="javascript">

  <!-- www.disemucho.net -->
//<![CDATA[
                  var nodo = document.getElementById('dr4');
                  nodo.setAttribute('data-icon', '★');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>


<a href="#" tabindex="1" class="button pink">boton rosa</a>   <!-- www.disemucho.net -->


Tab1 Tab2

<a href="#" tabindex="1" class="button pink">Tab1</a> <a href="#" tabindex="2" class="button pink">Tab2</a> <button disabled="disabled" class="button pink glossy">Disabled</button>   <!-- www.disemucho.net -->


Boton celeste

<a href="#" id="dr5" class="button morph blue" name="dr5">Boton celeste</a> <script type="text/javascript" language="javascript">

  <!-- www.disemucho.net -->
//<![CDATA[
                  var nodo = document.getElementById('dr5');
                  nodo.setAttribute('data-icon', '☯');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>


Boton rosado

<a href="#" id="dr6" class="button morph pink" name="dr6">Boton rosado</a> <script type="text/javascript" language="javascript">

  <!-- www.disemucho.net -->
//<![CDATA[


                  var nodo = document.getElementById('dr6');
                  nodo.setAttribute('data-icon', '❤');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>


menu1 menu2 menu3

<a href="#" id="mp1" class="button morph blue" name="mp1">menu1</a>

<a href="#" id="m2" class="button morph blue" name="m2">menu2</a>

<a href="#" id="m3" class="button morph blue" name="m3">menu3</a>


<script type="text/javascript" language="javascript">

  <!-- www.disemucho.net -->
//<![CDATA[
 var nodo = document.getElementById('mp1');
 nodo.setAttribute('data-icon', '☀');
//]]>
</script><script type="text/javascript" language="javascript">
//<![CDATA[
 var nodo = document.getElementById('m2');
 nodo.setAttribute('data-icon', '♫');
//]]>
</script><script type="text/javascript" language="javascript">
//<![CDATA[
 var nodo = document.getElementById('m3');
 nodo.setAttribute('data-icon', '☻');
//]]>
</script>


menu
menu
menu

<a href="#" id="btx1" class="button back blue" name="btx1">menu</a><br />
<a href="#" id="btx2" class="button back blue" name="btx2">menu</a><br />
<a href="#" id="btx3" class="button back blue" name="btx3">menu</a> <script type="text/javascript" language="javascript">

  <!--www.disemucho.net -->
//<![CDATA[
                  var nodo = document.getElementById('btx1');
                  nodo.setAttribute('data-icon', '☣');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script><script type="text/javascript" language="javascript">
//<![CDATA[
                  var nodo = document.getElementById('btx2');
                  nodo.setAttribute('data-icon', '☊');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script><script type="text/javascript" language="javascript">
//<![CDATA[
                  var nodo = document.getElementById('btx3');
                  nodo.setAttribute('data-icon', '✆');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>


menu

<a href="#" id="dr1" class="button drop green" name="dr1">menu</a> <script type="text/javascript" language="javascript">

  <!-- www.disemucho.net -->
//<![CDATA[
                  var nodo = document.getElementById('dr1');
                  nodo.setAttribute('data-icon', '♨');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>


menu

<a style="text-decoration:none;" href="#" id="btnxc" class="button knife blue" name="btnxc">tu menu</a> <!-- codigo para agregar un atributo html mediante javascript -->
 <script type="text/javascript" language="javascript">

  <!-- www.disemucho.net -->
//<![CDATA[
                  var nodo = document.getElementById('btnxc');
                  nodo.setAttribute('data-icon', '♚');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>

Imagenes

<a style="text-decoration:none;" href="#" id="me1" class="button pink serif glossy skew" name="me1">Imagenes</a> <!-- www.disemucho.net-->
 <script type="text/javascript" language="javascript">
//<![CDATA[
                  var nodo = document.getElementById('me1');
                  nodo.setAttribute('data-icon', '❏');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>


contacto

<a style="text-decoration:none;" href="#" id="me2" class="button blue serif glossy skew" name="me2">contacto</a> <!-- www.disemucho.net -->
 <script type="text/javascript" language="javascript">
//<![CDATA[
                  var nodo = document.getElementById('me2');
                  nodo.setAttribute('data-icon', '☎');
                 // document.write(nodo.getAttribute('data-icon'));
//]]>
</script>

Comentarios: 108
  • #108

    Javier Lara (miércoles, 04 mayo 2016 15:11)

    Todo listo ,
    Problema : no accesa a la pagina que se le agrega

  • #107

    for (martes, 17 noviembre 2015 21:21)


  • #106

    online (martes, 17 noviembre 2015 21:18)


  • #105

    online (martes, 17 noviembre 2015 16:27)


  • #104

    online (martes, 17 noviembre 2015 16:25)


  • #103

    viagra_online (jueves, 12 noviembre 2015 07:47)


  • #102

    cialis_online (jueves, 12 noviembre 2015 07:43)


  • #101

    cialis (lunes, 09 noviembre 2015)

    Hello!

  • #100

    buy_viagra (lunes, 09 noviembre 2015 20:12)

    Hello!

  • #99

    online (martes, 03 noviembre 2015 02:29)

    Hello!

  • #98

    online (martes, 03 noviembre 2015 02:27)

    Hello!

  • #97

    fast (martes, 03 noviembre 2015 02:25)

    Hello!

  • #96

    fast (martes, 03 noviembre 2015 02:24)

    Hello!

  • #95

    cialis_sale (domingo, 01 noviembre 2015 01:58)

    Hello!

  • #94

    fast (domingo, 01 noviembre 2015 01:56)

    Hello!

  • #93

    fast (domingo, 01 noviembre 2015 01:54)

    Hello!

  • #92

    viagra_sale (viernes, 30 octubre 2015 23:10)

    Hello!

  • #91

    cialis_sale (viernes, 30 octubre 2015 23:09)

    Hello!

  • #90

    fast (viernes, 30 octubre 2015 23:08)

    Hello!

  • #89

    fast (viernes, 30 octubre 2015 23:07)

    Hello!

  • #88

    cialis (jueves, 15 octubre 2015 13:21)

    Hello!

  • #87

    cheap_cialis (jueves, 15 octubre 2015 13:18)

    Hello!

  • #86

    online (jueves, 15 octubre 2015 04:29)

    Hello!

  • #85

    herbal_viagra (jueves, 15 octubre 2015 04:28)

    Hello!

  • #84

    online (jueves, 15 octubre 2015 04:26)

    Hello!

  • #83

    online (jueves, 15 octubre 2015 04:24)

    Hello!

  • #82

    generic_viagra (miércoles, 14 octubre 2015)

    Hello!

  • #81

    generic_cialis (miércoles, 14 octubre 2015 19:51)

    Hello!

  • #80

    online (martes, 13 octubre 2015 20:43)

    Hello!

  • #79

    online (martes, 13 octubre 2015 20:42)

    Hello!

  • #78

    viagra_pills (martes, 13 octubre 2015 20:00)


  • #77

    viagra_pills (martes, 13 octubre 2015 19:58)


  • #76

    viagra_professional (martes, 13 octubre 2015 06:58)


  • #75

    super (martes, 13 octubre 2015 06:57)


  • #74

    of (viernes, 02 octubre 2015 19:24)

    Hello!

  • #73

    of (viernes, 02 octubre 2015 19:23)

    Hello!

  • #72

    generic_viagra (viernes, 02 octubre 2015 19:21)

    Hello!

  • #71

    generic_cialis (viernes, 02 octubre 2015 19:20)

    Hello!

  • #70

    viagra_pills (miércoles, 23 septiembre 2015 20:35)


  • #69

    cialis (miércoles, 23 septiembre 2015 20:33)


  • #68

    viagra_pills (miércoles, 23 septiembre 2015 13:19)


  • #67

    cialis (miércoles, 23 septiembre 2015 13:17)


  • #66

    viagra (miércoles, 23 septiembre 2015 04:11)


  • #65

    viagra_pills (miércoles, 23 septiembre 2015 04:10)


  • #64

    cialis_professional (miércoles, 23 septiembre 2015 04:09)


  • #63

    cialis (miércoles, 23 septiembre 2015 04:07)


  • #62

    Todo Animes 2015 (sábado, 25 julio 2015 13:08)

    Entren a mi pagina, Animes Peliculas y Juegos para descargar. Gratis...

    Saludos.

  • #61

    jackandblack (lunes, 21 abril 2014 14:19)

    una gran pagina pero como puedo poner un icono o logotipo en mi pagina gratis podéis hacer un tutorial

  • #60

    juegosreextremos.jimdo.com (jueves, 27 febrero 2014 00:04)

    ENTREN A MI PAGINA PUEDEN APRENDER INGLES VER PELICULAS COMPLETAS ONLINE
    HAY JUEGOS Y MUCHO MASSSSSSSSSSSSS

  • #59

    madurarniquefuerafruta (martes, 30 abril 2013 17:46)

    ehy entren a mi web de memes en donde pueden crear sus memes para cualquier red social
    xD... Saludos