{"id":675,"date":"2013-08-01T15:55:22","date_gmt":"2013-08-01T15:55:22","guid":{"rendered":"http:\/\/maquetando.com\/?p=675"},"modified":"2013-08-01T16:07:10","modified_gmt":"2013-08-01T16:07:10","slug":"buttons-coleccion-de-botones","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/buttons-coleccion-de-botones\/","title":{"rendered":"Buttons: colecci\u00f3n de botones listos para usar"},"content":{"rendered":"

\"buttons2\"<\/a><\/p>\n

Crear botones con CSS es t\u00e9cnicamente f\u00e1cil, \u00a0pero cuando no tenemos el tiempo suficiente o solo necesitamos realizar un prototipo sin apegarnos a un dise\u00f1o especifico \u00a0 \u00a0siempre es recomendable tener alguna librer\u00eda o recursos a la mano para agilizar la tarea.<\/p>\n

Buttons<\/strong> es una colecci\u00f3n \u00a0de estilos para botones muy atractivos listos para \u00a0usar \u00a0en tus proyectos, si has usado TW bootstrap sabes lo f\u00e1cil que es aplicar \u00a0un estilo a un elemento html \u00a0para crear un bot\u00f3n, con Buttons<\/strong> es pr\u00e1cticamente \u00a0lo mismo \u00a0ya que \u00a0nos proporciona un conjunto clases CSS \u00a0que pueden ser aplicadas directamente a elementos html \u00a0como enlaces o de tipo input submit\/button .<\/p>\n

Por default \u00a0nos ofrece varios \u00a0estilos \u00a0: planos , redondos,cuadrados, con efectos de sombra y relleno , incluso puedes usar FontAwesome<\/a>\u00a0para incrustar iconos dentro del bot\u00f3n.<\/p>\n

Para personalizar \u00a0 nuestros botones \u00a0es indispensable tener instalado \u00a0Sass y Compass , aunque \u00a0para usar los estilos que vienen por defecto estas herramientas \u00a0no son necesarias .<\/p>\n

Para trabajar con Buttons<\/strong> :<\/p>\n

    \n
  1. Descargamos la libreria<\/a><\/li>\n
  2. Incluimos los archivos necesarios en nuestro archivo :\n
    <!--incluye font awesome solo si necesitas iconos-->\r\n<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\">\r\n<!-incluye jquery solo si necesitas botones dropdown-->\r\n<script src=\"http:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n\r\n<link rel=\"stylesheet\" href=\"css\/buttons.css\">\r\n<script type=\"text\/javascript\" src=\"js\/buttons.js\"><\/script<\/pre>\n<\/li>\n
  3. Aplicamos \u00a0los \u00a0estilos :\n
    <a href=\"#\" class=\"button button-pill\">press me<\/a>\r\n<a href=\"#\" class=\"button button-pill button-primary\">press me<\/a>\r\n<a href=\"#\" class=\"button button-pill button-action\">press me<\/a>\r\n<a href=\"#\" class=\"button button-pill button-highlight\">press me<\/a>\r\n<a href=\"#\" class=\"button button-pill button-caution\">press me<\/a>\r\n<a href=\"#\" class=\"button button-pill button-royal\">press me<\/a><\/pre>\n<\/li>\n<\/ol>\n
    Resultado :\u00a0
    \n\"buttons1\"<\/a><\/p>\n
    [ Enlace : Buttons<\/a> ]<\/p>\n","protected":false},"excerpt":{"rendered":"
    Crear botones con CSS es t\u00e9cnicamente f\u00e1cil, \u00a0pero cuando no tenemos el tiempo suficiente o…<\/p>\n","protected":false},"author":1,"featured_media":677,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,22],"tags":[60,4],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/675"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=675"}],"version-history":[{"count":11,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":692,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions\/692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/677"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}