Nada de comentarios fuera de lugar... si si respetan van a ser respetados si encuentran algun error me lo dicen error de codigo o de ortografia.vamos a usar el photoshop solo para hacer el boton ok bueno empecemos!
Para empesar a crear el boton abrimos el photoshop y creamos un nuevo documento de 101 x 68 pixeles
Ahora vamos a la herramienta lupa y despues a ajustar pantalla
Lo siguiente que vamos a hacer es ''activar'' las reglas. las reglas son estas y se activan con CTRL+R
Ahora vamos a ver al costado que dice: 0 - 01 - 02 - 03 - 04 - 05 - etc vamos a seleccionar la herramienta mover y de la regla superior sacamos una ''guia'' que vamos a posicionar en ''05'' de la otra regla asi...
(el gif esta mal echo porque nose que paso con camtasia no me reconoce el puntero y me las tube que ingeniar para inventar el puntero pero ala idea es clara)
Bien.Arriba va a estar el nomal y abajo el hover ok. Voy a hacer algo rapido para mostrar (no esperen un super boton :grin
Para empezar con html vamos al notepad++,dreamweaver,bluefish o lo que usen se puede usar hasta el bloc de notas si no quieren bajar nada bueno yo voy a usar notepad++
vamos a crear una nueva carpeta y adentro de esa carpeta vamos a crear otra que diga ''img'' y adentro ponemos nuestro 'boton'
Ahora vamos al notepad++ o lo que esten usando y nos vamos a archivo - nuevo o CTRL+N
despues de crear el documento vamos a ir a Lenguaje - H - HTML
Ahora empecemos vamos a poner los elementos basicos de html
para los que no saben que es <title>...</title> es el titulo de la web como muestra la imagen
Bueno ahora vamos a apretar CTRL+S (es para guardarlo) y lo guardan en la misma carpeta con el nombre de index.html
ahora solo tienen que apretar CTRL+S cuando hagan un cambio para guardarlo ok... ahora vamos a añadir un <div> con un id='general'
Adentro del <div> vamos a poner un <ul> que como explique en el post anterior son listas
ahora viene la etiqueta <li>
bueno ahora solo nos queda poner la etiqueta <a></a> pero vamos a agregarle un class=''perfil'' y obviamente el href=''link''
href="#" el # significa que no manda a ningun lado
Para empezar a poner estilo podemos hacer 2 cosas crear un archivo aparte y enlazarlo al index.html o ponerlo adentro del index.html
Bueno vamos a enlazar el css al index.html para eso nos vamos a archivo - nuevo repiten los mismo pasos que con el html pero en vez de ir a Lenguaje - H - html vamos a ir a lenguaje - C - css despues vamos a apretar CTRL+S y lo guardamos talcual como hicimos con el index pero le ponemos estilo.css o lo que quieran
y ahora nos vamos al index.html y agregamos esto en el <head>
en el href='aca ponen la ruta' puede ser adentro de una carpeta en ese caso seria
href='nombre de la carpeta/estilo.css' y ponganse que el css esta en una carpeta anterior en ese caso seria href='../estilo.css' y si es una carpeta href='../lacarpeta/estilo.css'
PD: Los "../estilo.css" esos puntos le va a indicar al navegador que retroceda una carpeta para atras
Bueno esta opcion es mas facil de hacer pero mas... a ver como se los puedo decir a... si se te arma un quilombo con los codigos por decirlo de alguna forma para mi es mas comoda la primera forma pero si a ustedes les parece mas comoda esta tambien es buena opcion
Bueno para hacerlo solo agregan la etiqueta <style></style> al index.html
Ahora SI manos a la obra...para empezar vamos a añadir la etiqueta li en el css asi...
Adentro de los { } que es donde ponemos el css vamos a poner "list-style" que es el estilo de la lista y lo ponemos asi...
Puesto eso vamos a añadir: ''#general:'' que es el div adentro del id general vamos a poner margin-left y margin-top: (es para posicionarlo nada mas)
margin-left: hace que el div o la etiqueta se corra para la derecha poniendo por ej: margin-left: 50px; eso obviamente se va a correr 50 pixeles hacia la derecha
Ojo!: si quieren que se se mueva para la izquierda tienen que poner un numero negativo ej: margin-left: -50px; obviamente se corre 50 pixeles hacia la izquierda
margin-top:es exactamente lo mismo que con el left la diferencia es que va para abajo ej: margin-top: 20px; y como el otro se va para abajo y si le ponen un numero negativo se va para arriba
ahora vamos a añadir "#general ul li" que imbolucra al div y a las lista lo que vamos a poner es un "display"
Lo siguiente que vamos a hacer es poner "#general ul li a" parece que es lo mismo pero no este imbolucra al div,las listas y el link y adentro vamos a poner las dimenciones osea anchura y altura
Ok ahora vamos a poner el class que le pusimos a la etiqueta <a> anteriormente adentro del class vamos a poner...
transition:es para la animacion
background-image: el fondo (en nuestro caso el boton)
background-position: es la posicion del fondo
display:La Propiedad display define cómo/o si se mostrara un elemento.
height: altura
text-indent:seria dar sangría a un parrafo
width: ancho
Nota:la ruta de la imagen del boton la ponen aca: background-image: url("img/button.png"
Hora de añadir el hover (es cuando pasas el puntero por arriba)
Bueno con eso terminamos espero que les haya gustado nos vemos en el próximo post