Botón CSS para blogger y otros

Buen día, hoy compartiré el código CSS de un pequeño botón que me ha gustado mucho y que estoy utilizando en uno de mis blogs donde escribo chorradas. También explicare como personalizar el botón para que sepas como cambiar los colores a tu gusto.

Código HTML:

 
 <div class="btn btn-deg"><a href="url" title="titulo">Botón deg</a></div>

Código CSS del botón:

.btn a{display:inline-block;padding:6px 12px;margin-bottom:0;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
background-image:none;border:1px solid transparent;border-radius:4px;}
.btn.active.focus a,.btn.active a:focus,.btn.focus a,.btn a:active.focus,.btn a:active:focus,.btn a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.btn.focus a,.btn a:focus,.btn a:hover{color:#333;text-decoration:none;}
.btn.active a,.btn a:active{background-image:none;outline:0;
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}

.btn-deg a{color:#fff;background-color:#5cb85c;border-color:#4cae4c;text-decoration:none;font-weight: bold;}
.btn-deg.focus a,.btn-deg a:focus{color:#fff;background-color:#449d44;border-color:#255625}
.btn-deg a:hover{color:#fff;background-color:#449d44;border-color:#398439;}

Así se ve el botón:

Fanfic

Las lineas que nos interesan son las tres ultimas del código CSS, aquí se pueden cambiar los colores que tendrá el botón. La primera de las tres lineas contiene los colores que tendrá el botón, la segunda define los colores que tendrá cuando el botón tenga el focus; como cuando se arrastra el botón y se suelta lejos de el (focus) la verdad no me parece muy útil (si quieren pueden desechar esta linea), y la tercera y ultima linea tiene los colores para cuando el puntero del ratón este sobre el botón (hover). ¿Fácil no?

Para cambiar los colores de los tres estados del botón debemos buscar y editar los siguientes campos en las tres ultimas lineas:

• color: Este es el color del texto.
• background-color: Es el color de fondo del botón.
• border-color: Es el color que tendrá el borde del botón.

Ejemplo:

CSS ultimas tres lineas:

.btn-deg a{color:#0000f7;background-color:#000000;border-color:#2d0768;text-decoration:none;font-weight: bold;}
.btn-deg.focus a,.btn-deg a:focus{color:#fff;background-color:#120920;border-color:#000000}
.btn-deg a:hover{color:#000000;background-color:#fff;border-color:#0000f7;}

Fanfic

Se puede alinear con float para izquierda y derecha (left right). Para alinear al centro con text-align:center;

Fácil, sencillo y rápido.

Saludos y nos leemos.