Enlace boton con css, no me queda igual

fcosun · #1 (**permalink**) 25/05/2012, 20:49

hola estoy tratando de crear ese tipo de boton con css

Demo:

Aca tengo el codigo, pero no queda igual:

Código HTML:

Ver original<html>
<head>
<title>Creando un boton</title>
 
<style type=text/css>
 
.miboton {
    padding-right: 4px; 
    padding-left: 4px; 
    font-weight: bold; 
    font-size: 10pt;
    padding-bottom: 4px;
    color: #F0F1F5;
    padding-top: 4px; 
    font-family: verdana, arial, sans-serif;
    background-color: #7B8BD1; 
    text-decoration: none
}
.miboton:link {
    border-right: #B4B4F0 2px solid;
    border-top: #cccccc 1px solid; 
    border-left: #cccccc 1px solid;
    border-bottom: #B4B4F0 2px solid
}
 
</style>
 
</head>
<body>
    <div>
        <a class=miboton href="#">Mi Boton</a> 
    </div>
</body>
 
</html>

C2am · #2 (**permalink**) 25/05/2012, 22:44

Hola
Con un poco de Css3 puedes lograr esos efectos:

Con linear-gradient, logras los degradados del fondo.
Con border-radius los bordes o esquinas redondeadas.

Ejemplo

Saludos

rodeirojg · #3 (**permalink**) 01/06/2012, 17:18

Coincido con C2am, para lograr esos degradados y los bordes redondeados, deberías comprender las propiedades que tiene CSS.

Pero te ofrezco una salida mentalmente mas sana. Diseñá una imagen de cómo se vería el fondo del botón (llamemosle: fondo_boton.jpg), y otra imagen cuando el mouse se posaría encima (fondo_boton_2.jpg). Entonces hacés lo siguiente:

<html>
<head>
<title>Creando un boton</title>

<style type=text/css>

#miboton a {
background-image: url(fondo_boton.jpg);
}

#miboton a:hover {
background-image: url(fondo_boton_2.jpg);
}

</style>

</head>
<body>
<div>
<a class=miboton href="#">Mi Boton</a>
</div>
</body>
</html>

Obviamente dentro de las propiedades del estilo "miboton", podés asignarle la tipografía que quieras y lógicamente asignarle el nombre correcto al botón que diseñaste.

Si querés que el fondo no se repita, en el Style usá la propiedad :
background-repeat:no-repeat;