Como Crear Un Boton CSS Para Nuestra Web

Hola taringueros!
Estoy aprendiendo php,css y javascript y les traigo un tuto de como crear botones css para nuestra web.
Pues les enseñare a crear uno parecido al del boton seguir usuario.

La Base principal del css para el boton es un codigo bastante grande,asi que en un style.css de nuestra web agregamos lo siguiente:


/*Buton Style*/
.btn_g .follow {
background-position: 0 -1362px;}

.btn_g .follow:hover {
color: #14aa03;
}


.spinner {
background-image: url('images/spinner.gif');
background-position: 0 0!important;
background-repeat: no-repeat!important;
}
.avatar-box .spinner span {
background: url('images/spinner.gif') right 0px no-repeat!important;
}

.avatar-box li.comprobando a {
color: #9F9F9F!important;
}

.btn_g .unfollow {
background-position: 0 -1382px;
}
.btn_g {
display: block;
font-weight: bold;

padding: 5px 8px;
border: 1px solid #bababa;
-moz-border-radius: 5px;
background: url('images/bg_g.gif') repeat-x bottom left!important;
text-shadow:0 1px 0 #FFFFFF;
font-size: 11px;
}

.btn_g span,.btn_g span:hover {
padding-left: 22px;
text-decoration: none!important;
}

.btn_g:hover {
-moz-box-shadow: 0 0 2px rgba(0,0,0,0.3);
text-decoration: none;
}

.btn_g:active {
background: #cbcbcb url('images/bg_g.gif') repeat-x top left!important;
}
/*Buton Style*/


Donde dice images lo podemos cambiar por otra carpeta,es segun su theme y carpeta contenedora de imagenes,y subir la siguiente imagen a la carpeta images o imagenes de su theme de su web:

Como Crear Un Boton CSS Para Nuestra Web
Link De La Imagen: http://u.jimdo.com/www23/o/sff694e6873841aa4/img/i04446541759d6f56/1284168137/std/image.gif


Ahora este seria el codigo del boton:

<a href="ACCION A REALIZAR" class="btn_g follow_user_post"><span class="icons follow">'.$title="Titulo Del Boton".'</span></a>


Vemos que tenes un class de un icono para css,por lo cual vamos a tomar como ejemplo este icono:
boton
y vamos a poner ese icono como css,para no sacarle codigos al codigo anterior:

.icons.follow{background:url('images/imagen.png') no-repeat;padding-left: 9px;}


Subimos la imagen a la carpeta images de nuestro theme,o como se llame la carpeta que contiene las imagenes (si no sse llama images deves cambiarle el nombre al codigo css) y subimos la siguiente imagen:

css
Link de la imagen: http://u.jimdo.com/www23/o/sff694e6873841aa4/img/i1e4db973a02e07a1/1284168151/std/image.png


Ahora Del codigo que les di que maneja las acciones del boton,que es el segundo codigo que les di,reemplazamos ACCION A REALIZAR por una url que queremos que valla cuando se clickee este boton,por ejemplo: www.miweb.com/enviar-a-un-amigo

Ahora cuando tengamos todo el codigo quedara mas o menos asi:


<a href="www.miweb.com/enviar-a-un-amigo" class="btn_g follow_user_post"><span class="icons follow">'.$title="Enviar A Un Amigo".'</span></a>


Ahora si hemos hecho todo bien,nos quedara asi:

Como

Esto es todo taringueros.
Espero que les sirva mi tutorial css.
Chau!

9 comentarios - Como Crear Un Boton CSS Para Nuestra Web

@Feeelaaaa
#50cce0">B#46cdc4">u#3ccda8">e#2dce7e">n#23cf62">i#14d038">s#0ad11c">i#00d200">m#28a800">o #5f7000">T#884600">u #cc0000">A#aa0000">p#880000">o#540000">r#330000">t#000000">e#001f00">! #006d00">P#008d00">a#00ac00">s#00be0d">a#00a328">t#007a51">e #004488">P#001bb0">o#0000cc">r #1e48d8">M#2a66dd">i#3c91e4">s #55ccee">P#42a0e6">o#3683e1">s#2457da">t#183ad5">s#0c1dd0">!
@fullvice
Muy bueno, yo siempre tube la duda de que hace &quot;a&quot; en el codigo y :hover ??? :hover es cuando pasas por arriba el mouse ??
@JoanManuelH
Feeelaaaa dijo:#50cce0">B#46cdc4">u#3ccda8">e#2dce7e">n#23cf62">i#14d038">s#0ad11c">i#00d200">m#28a800">o #5f7000">T#884600">u #cc0000">A#aa0000">p#880000">o#540000">r#330000">t#000000">e#001f00">! #006d00">P#008d00">a#00ac00">s#00be0d">a#00a328">t#007a51">e #004488">P#001bb0">o#0000cc">r #1e48d8">M#2a66dd">i#3c91e4">s #55ccee">P#42a0e6">o#3683e1">s#2457da">t#183ad5">s#0c1dd0">!
@fullvice
AprendePcOFICCE19982008 dijo:
fullvice dijo:Muy bueno, yo siempre tube la duda de que hace &quot;a&quot; en el codigo y :hover ??? :hover es cuando pasas por arriba el mouse ??
si,pasas el mouse y el texto se vuelve verde = a t!

y el &quot;a&quot; ???