{"id":3945,"date":"2014-10-16T17:45:46","date_gmt":"2014-10-16T20:45:46","guid":{"rendered":"http:\/\/betaweblog.education\/wp\/?p=3945"},"modified":"2014-10-16T17:45:46","modified_gmt":"2014-10-16T20:45:46","slug":"lindos-botones-con-css-ii","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2014\/10\/16\/lindos-botones-con-css-ii\/","title":{"rendered":"Lindos botones con CSS (II)"},"content":{"rendered":"

\"botones<\/a>
\nAl igual que en el post anterior<\/a>, voy a compartir el c\u00f3digo HTM y CSS para hacer unos botones lindos y accesibles, ya que el contenido est\u00e1 separado del formato.<\/p>\n

En este caso us\u00e9 una imagen transparente de frente y una imagen de unas flores como fondo*.
\nImagen de frente:<\/p>\n

Rect\u00e1ngulo semi transparente hecho en Gimp (lo pongo sobre una superficie gris para que se pueda ver…)<\/p>\n

\"Rect\u00e1ngulo<\/a><\/div>\n

El c\u00f3digo es pr\u00e1cticamente el mismo que en el post anterior<\/a>, pero le modifiqu\u00e9 los m\u00e1rgenes y el padding para que se viera el bot\u00f3n transparente dentro del otro.<\/p>\n

Este es el HTML. En el bloque de la izquierda abro y cierro el “marco” por cada bot\u00f3n, y en el de la derecha el “marco” contiene los otros tres divs:<\/p>\n

<div style=”width: 15%; float: left;”>
\n<div class=”marco”>
\n<div class=”boton”><p>Opci\u00f3n 1<\/p>
\n<\/div><\/div>
\n<div class=”marco”>
\n<div class=”boton”><p>Opci\u00f3n 2<\/p>
\n<\/div><\/div>
\n<div class=”marco”>
\n<div class=”boton”><p>Opci\u00f3n 3<\/p>
\n<\/div><\/div>
\n<div class=”marco”>
\n<div class=”boton”><p>Opci\u00f3n 4<\/p>
\n<\/div><\/div>
\n<\/div><\/p>\n

<div style=”width: 15%; float: left; margin-left: 20px;”>
\n<div class=”marco” style=”margin: 10px;”>
\n<div class=”boton”><p>Opci\u00f3n 1<\/p>
\n<\/div>
\n<div class=”boton”><p>Opci\u00f3n 2<\/p>
\n<\/div>
\n<div class=”boton”><p>Opci\u00f3n 3<\/p>
\n<\/div>
\n<\/div>
\n<\/div><\/p>\n

Y ac\u00e1 est\u00e1 el CSS:<\/p>\n

.marco {<\/p>\n

width: 99%;
\nbackground-image: url(‘http:\/\/irisfernandez.com.ar\/imagenes\/flores.jpg’);
\nbackground-repeat: repeat-none;
\npadding-top: 10px;
\npadding-bottom: 10px;
\n}<\/p>\n

.boton {
\nwidth: 80%;
\nline-height: 40px;
\nbackground-image: url(‘http:\/\/irisfernandez.com.ar\/imagenes\/transparente.png’);
\ncolor: #000;
\nmargin-left: auto;
\nmargin-right: auto;
\nmargin-top: 10px;
\nmargin-bottom: 10px;
\ntext-align: center;
\n}
\n.boton a:link {
\ncolor: #000;
\ntext-decoration: none;
\n}
\n.boton a:hover {<\/p>\n

color: #000;
\ntext-decoration: none;
\n}
\n.boton a:visited {<\/p>\n

color: #000; text-decoration: none;
\n}<\/p>\n

*Imagen de fondo descargada de Wikimedia Commons:<\/p>\n

\n

Douglasia laevigata 2453<\/span>CC BY-SA 3.0<\/a><\/p>\n

Walter Siegmund<\/a>\u00a0<\/span>–\u00a0Own work<\/span><\/span><\/span><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Al igual que en el post anterior, voy a compartir el c\u00f3digo HTM y CSS para hacer unos botones lindos y accesibles, ya que el contenido est\u00e1 separado del formato. En este caso us\u00e9 una imagen transparente de frente y una imagen de unas flores como fondo*. Imagen de frente: Rect\u00e1ngulo semi transparente hecho en … Continuar leyendo “Lindos botones con CSS (II)”<\/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":[3,9,13],"tags":[],"class_list":["post-3945","post","type-post","status-publish","format-standard","hentry","category-cultura-libre","category-htmlcss","category-moodle"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3945","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=3945"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3945\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=3945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=3945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=3945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}