Foros del Web » Creando para Internet » CSS »

Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Estas en el tema de Así puedes hacer "Botones" con esquinas redondeadas solo CSS en el foro de CSS en Foros del Web. Edito : para enlazar curiosidades: Y los botones de la Wii aquí Fin de la edicción. Muy a menudo surgen consultas sobre cómo hacer para ...
  #1 (permalink)  
Antiguo 14/10/2008, 16:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Así puedes hacer "Botones" con esquinas redondeadas y efecto rollover solo CSS

Edito: para enlazar curiosidades:
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:
<?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>
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.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 29/10/2008 a las 08:55
  #2 (permalink)  
Antiguo 14/10/2008, 18:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Curiosa e interesante solución. Apúntate un tanto al menos por encontrarlo y compartirlo
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 14/10/2008, 20:13
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Sí señor!

Muy buen aporte. Gracias kseso? por compartirlo.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #4 (permalink)  
Antiguo 14/10/2008, 22:10
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Gracias kseso?:

Muy buen ejemplo y mucho mas sencillo que otros que usan Javascript y te llenan de codigo... te felicito !!
  #5 (permalink)  
Antiguo 16/10/2008, 00:28
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Muchas gracias kseso? . ( Nuevo Karma para tí. )

Saludos .
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #6 (permalink)  
Antiguo 16/10/2008, 09:57
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Gracias por el código kseso?

¿Te animas a ponerlo en las FAQs?

Saludos,
  #7 (permalink)  
Antiguo 16/10/2008, 11:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Cita:
Iniciado por JavierB Ver Mensaje
Gracias por el código kseso?

¿Te animas a ponerlo en las FAQs?

Saludos,
¿Pero no está prohibido duplicar los post?
Mejor hago un cruce de enlaces entre efecto rollover sólo con css en las faq´s y éste.
Por no sentar precedentes
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 16/10/2008, 19:25
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Así puedes hacer "Botones" con esquinas redondeadas solo CSS

Bien ganado el karma entonces.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:40.