Como cambiar atributos en botones css

thedaket · #1 (**permalink**) 30/06/2011, 14:55

Hola tengo un problema para cambiar los atributos de la imagen en un boton css rollver

y quiero cambiarlo de forma a las medidas de la imagen es decir si tengo una imagen de 200x80 sea a esa media el codigo que tengo es el siguiente:

Código HTML:

<html>
	<head>
	<style type="text/css">
	.cinco a {
		font-family: Comic Sans MS, Comic Sans MS, sans-serif;
		font-size: 0px;
		text-decoration: none;
		color: #000000;
		background-image: url(http://dl.dropbox.com/u/33016972/icon2.png);
		background-repeat: no-repeat;
		background-position: center center;
		padding:35px;
	}
	.cinco a:hover {
		font-family: Arial Black, Comic Sans MS, sans-serif;
		font-size: 0px;
		text-decoration: none;
		color: #000000;
		background-image: url(http://dl.dropbox.com/u/33016972/icon1.png);
		padding:40px;
	}


	</style>
	</head>
	
	<body>
	<div class="cinco">
	<a href="url">url</a>
	</div>
	</body>
	</html>

Donde dice padding es donde es el problema no se puede ajustar con width y height gracias espero me hayan entendido y me puedan ayudar :D

ArturoGallegos · #2 (**permalink**) 30/06/2011, 15:16

agrege las propiedades

- display:block
- width
- height

thedaket · #3 (**permalink**) 01/07/2011, 01:33

Pero entre donde las coloco ??? en padding ???

ArturoGallegos · #4 (**permalink**) 01/07/2011, 10:10

quiero pensar que el padding usted lo coloco pensando que el link crecería tanto ancho como algo... siendo así y siguiendo el mismo patrón que tiene su código quedaría de la siguiente forma:

Código CSS:

Ver original.cinco a {
    display:block;
    width:35px;
    height:35px;
    text-indent:100px;
    text-decoration: none;
    background: url(http://dl.dropbox.com/u/33016972/icon2.png) no-repeat center center;
}
.cinco a:hover {
    width:40px;
    height:40px;
    background-image: url(http://dl.dropbox.com/u/33016972/icon1.png);
}

le sugiero pase a leer algun libro o tutorial sobre CSS, para empezar le recomiendo este -> clic aquí

Edito: el tipo de letra, color y tamaño no son necesarios si los va a ocultar...

thedaket · #5 (**permalink**) 02/07/2011, 00:06

Oye pero sale como un link normal ya no sale ni la imagen ??? no abra otra forma de hacer botones asi ? rollover ? por su atencion gracias y gracias Ag666

ArturoGallegos · #6 (**permalink**) 02/07/2011, 00:51

aunque ciertamente cometí un error en el código anterior, este no afecta al mostrar la imagen... acabo de probar el código y funciona perfectamente... le dejo el código tal cual lo he implementado.

mi error estuvo en text-indent:100px; debió de ser en negativo -> text-indent:-100px;

y el codigo que con el que acabo de probar fue:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Ag666" />
    <title>Untitled 1</title>
<style type="text/css">
    .cinco a {
        display:block;
        width:35px;
        height:35px;
        text-indent:-100px;
        text-decoration: none;
        background: url(http://dl.dropbox.com/u/33016972/icon2.png) no-repeat center center;
    }
    .cinco a:hover {
        width:40px;
        height:40px;
        background-image: url(http://dl.dropbox.com/u/33016972/icon1.png);
    }
</style>
</head>
 
<body>
    <div class="cinco">
    <a href="url">url</a>
    </div>
 
</body>
</html>

thedaket · #7 (**permalink**) 02/07/2011, 13:39

Oh gracias si sirvio pero mi error era comprobarlo en navegador safari el dual tiene incompatibilidad lo probe con internet explorer y si funciona no habra posibilidad de hacerlo compatible con todos o la mayoria de navegadores ? perdon si molesto y de verdad mil gracias de nuevo a Ag666 me ah salvado el pellejo :D

Sanchy_com · #8 (**permalink**) 03/07/2011, 08:04

Debería funcionar en Safari.

Qué es exactamente lo que sucede cuando lo probás con Safari?

Tal vez lo que este sucediendo es que la imagen de fondo al hacer el hover este tardando en cargar y por eso no la hayas visto.

Si es eso te convendria hacer un Sprite. Eso es, poner las 2 imagenes en 1 misma. Una seguida de la otra (vertical u horizontalmente). Y al hacer :hover simplemente cambias el background-position

Por ejemplo:

Código:

.cinco a {
background: url(icon-sprite.png) no-repeat left top; (con left top posicionas la imagen de fondo en su vertice superior izquierdo)
}
    
.cinco a:hover {        
background-position:left -35px; (35px es la altura que se debe "bajar" la imagen de fondo para "llegar" a la segunda imagen, con un valor negativo "bajas" y con un valor positivo "subis")
    }

Practica un poco para ver como funciona. Suerte :)

thedaket · #9 (**permalink**) 04/07/2011, 02:54

Hola gracias por responder ya probe el codigo de Sanchy_com pero no ah resultado a un sigue teniendo incompatibilidad con safari opera y netscape aun no lo eh proboda con google chrome espero me puedan ayudar lo necesito de verdad mil gracias.

ArturoGallegos · #10 (**permalink**) 04/07/2011, 10:07

tal vez tengas algo mas en el código que este afectando, el código que te proporcione tiene compatibilidad con todos los navegadores e inclusive por tu comentario de incompatibilidad lo he probado en todos los navegadores actualmente mas utilizados (safari, chrome, IE7-9, opera y FF)

todo anda perfecto... el netscape nunca lo tomo en cuenta quizás porque no conozco nadie que lo utilice, mas tarde lo descargare solo para hacer esta prueba.

thedaket · #11 (**permalink**) 06/07/2011, 00:40

entonces la pregunta es como poner el codigo ??? y donde colocar cada atributo eso es lo que me falla

ArturoGallegos · #12 (**permalink**) 06/07/2011, 09:54

si tienes el código tal cual te lo di debería funcionar... coloca en un archivo html el código que te proporcione en la respuesta #6 y pruebalo funciona perfectamente en todos los navegadores....

la falla que puedas tener en el resto de tu sitio sin ver el sitio en vivo o en su defecto el código es imposible ayudarte.