Y los botones de la Wii aquí
Fin de la edicción.
Muy a menudo surgen consultas sobre cómo hacer para que un elemento tenga las esquinas redondeadas.
Pues de la página de Román Cortés (en este artículo) te hago partícipe de cómo lograr botones tipo "google analytics", ésto es, bordes redondeados de 1 px y sin imágenes, solo css.
/*abro paréntesis por sugerencias. Quizás también te interese efecto rollover sólo con css que está en las faq´s . Cierro paréntesis */
SI quieres verlo funcionando, ya sabes, ejecuta el siguiente código en tu navegador.
Cita:
Ya que te hago partícipe de un trabajo ajeno, creo que estaría bien que si utilizas este código, pases por su página y le dejes un comentario de agradecimiento. Qué menos.<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- encontrado en la página "http://www.romancortes.com/blog/one-pixel-notched-corners-bordes-con-un-pixel-de-redondeo/ "-->
<head>
<title>1px round border</title>
<style type="text/css">
ul, ul li, ul a, ul b {
text-decoration: none;
position: relative;
display: block;
margin: 0;
padding: 0;}
ul li {
float: left;
clear: both;
left: 1px;
list-style: none;
background-color: #aaa;
border-bottom: 2px solid #aaa;
margin-bottom: 5px;}
ul li a {
width: 120px;
float: left;
left: -1px;
top: 1px;
margin-right: -2px;
background-color: #ddd;}
ul li a:hover {
background-color: #ccc;}
ul li a b {
border: solid #aaa;
border-width: 0 1px 0 1px;
padding: 3px;
line-height: 15px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<b>Preeeparado</b>
</a>
</li>
<li>
<a href="#">
<b>Liiiiiiisto</b>
</a>
</li>
<li>
<a href="#">
<b>¡YAAAAAAAAA!</b>
</a>
</li>
<li>
<a href="http://www.forosdelweb.com/f53/faqs-css-114830/index3.html#post2615840">
<b><i>Puedes intentar poner imágenes con con efecto HOVER con este post.</i></b>
</a>
</li>
</ul>
</body>
</html>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- encontrado en la página "http://www.romancortes.com/blog/one-pixel-notched-corners-bordes-con-un-pixel-de-redondeo/ "-->
<head>
<title>1px round border</title>
<style type="text/css">
ul, ul li, ul a, ul b {
text-decoration: none;
position: relative;
display: block;
margin: 0;
padding: 0;}
ul li {
float: left;
clear: both;
left: 1px;
list-style: none;
background-color: #aaa;
border-bottom: 2px solid #aaa;
margin-bottom: 5px;}
ul li a {
width: 120px;
float: left;
left: -1px;
top: 1px;
margin-right: -2px;
background-color: #ddd;}
ul li a:hover {
background-color: #ccc;}
ul li a b {
border: solid #aaa;
border-width: 0 1px 0 1px;
padding: 3px;
line-height: 15px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<b>Preeeparado</b>
</a>
</li>
<li>
<a href="#">
<b>Liiiiiiisto</b>
</a>
</li>
<li>
<a href="#">
<b>¡YAAAAAAAAA!</b>
</a>
</li>
<li>
<a href="http://www.forosdelweb.com/f53/faqs-css-114830/index3.html#post2615840">
<b><i>Puedes intentar poner imágenes con con efecto HOVER con este post.</i></b>
</a>
</li>
</ul>
</body>
</html>
Un saludo
. ( Nuevo Karma para tí. )
. 
Este tema le ha gustado a 1 personas