{"id":3941,"date":"2014-10-16T16:46:38","date_gmt":"2014-10-16T19:46:38","guid":{"rendered":"http:\/\/betaweblog.education\/wp\/?p=3941"},"modified":"2014-10-16T16:46:38","modified_gmt":"2014-10-16T19:46:38","slug":"lindos-botones-con-css","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2014\/10\/16\/lindos-botones-con-css\/","title":{"rendered":"Lindos botones con CSS"},"content":{"rendered":"

\"Botones<\/a>En uno de mis trabajos ten\u00eda que hacer unos botones m\u00e1s o menos acordes con el resto del sitio y se me ocurri\u00f3 hacerlos en un rect\u00e1ngulo con sombra, sobre una franja de otro color.<\/p>\n

\u00bfPor qu\u00e9 no hacerlos directamente como imagen?<\/strong><\/p>\n

Porque la regla n\u00famero uno de la accesibilidad es separar el contenido del formato. Un invidente puede escuchar el nombre de las opciones \u00fanicamente si estas est\u00e1n insertadas como texto.<\/p>\n

Un dispositivo muy lento mostrar\u00e1 los textos y tardar\u00e1 mucho en cargar las im\u00e1genes.<\/p>\n

\u00bfC\u00f3mo se hacen?<\/strong><\/p>\n

1) En el archivo CSS se definen los tipos de DIV que se usar\u00e1n:<\/p>\n

Un div contiene la franja que est\u00e1 debajo del rect\u00e1ngulo.<\/p>\n

Es un div que mide 50px de altura, y que tiene como fondo una imagen (porque esa franja anaranjada tiene un degradado). La imagen de fondo se repite horizontalmente cuanto sea necesario, adapt\u00e1ndose al ancho del DIV.<\/p>\n

Este es el c\u00f3digo CSS del marco:<\/p>\n

.marco {<\/pre>\n
width: 99%;<\/pre>\n
height: 50px;<\/pre>\n
 background-color: #fff;<\/pre>\n
background: url('http:\/\/blabla\/pix\/fondoopciones.png');<\/pre>\n
background-repeat: repeat-x;<\/pre>\n
}\n\nY este es el CSS del bot\u00f3n en s\u00ed<\/pre>\n
.boton {<\/p>\n
 width: 80%;\n line-height: 40px;\n background-color: #773156;\n color: #fff;\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n box-shadow: 5px 5px 2px #999; \n}<\/pre>\n
.boton a:link {<\/pre>\n
 color: #fff;\n text-decoration: none;\n }\n<\/pre>\n
.boton a:hover {<\/p>\n
 color: #fff;\n text-decoration: none;\n }<\/pre>\n
.boton a:visited {<\/p>\n
 color: #fff; text-decoration: none;<\/pre>\n
}<\/p>\n
Luego, en el HTML utilizo un DIV dentro de otro:<\/p>\n
<div class=\"marco\"><\/pre>\n
<div class=\"boton\"><\/pre>\n
<a href=\"enlacedelboton\">Preguntas frecuentes<\/a><\/pre>\n
<\/div>\n<\/div>\n\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
En uno de mis trabajos ten\u00eda que hacer unos botones m\u00e1s o menos acordes con el resto del sitio y se me ocurri\u00f3 hacerlos en un rect\u00e1ngulo con sombra, sobre una franja de otro color. \u00bfPor qu\u00e9 no hacerlos directamente como imagen? Porque la regla n\u00famero uno de la accesibilidad es separar el contenido del … Continuar leyendo “Lindos botones con CSS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,13],"tags":[],"class_list":["post-3941","post","type-post","status-publish","format-standard","hentry","category-htmlcss","category-moodle"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=3941"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3941\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=3941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=3941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=3941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}