Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje30-01-2012, 23:26 (UTC)    
Título del mensaje: Botones CSS | "Azul Perfecto" by DaviXM
Responder citando
Hola bien hoy les dejo este aporte yo lo adapte para PWG ojala les guste

"Azul Perfecto"


Vista Previa y Estilos


Codigo de Estilo 1
CSS
Código:
@charset "UTF-8";
/* CSS Document */

/*
DEMO 1
*/

.a_demo_one {
   background-color:#3bb3e0;
   padding:10px;
   position:relative;
   font-family: 'Open Sans', sans-serif;
   font-size:12px;
   text-decoration:none;
   color:#fff;
   border: solid 1px #186f8f;
   background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(44,160,202)),
   color-stop(1, rgb(62,184,229))
   );
   -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
   -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
   box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
}

.a_demo_one::before {
   background-color:#ccd0d5;
   content:"";
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   padding:8px;
   left:-8px;
   top:-8px;
   z-index:-1;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
   -moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
   -o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
   box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

.a_demo_one:active {
   padding-bottom:9px;
   padding-left:10px;
   padding-right:10px;
   padding-top:11px;
   top:1px;
   background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(62,184,229)),
   color-stop(1, rgb(44,160,202))
   );
}



HTML para Estilo 1
Código:
<div id="container_buttons">
                    <p>
                        <a href="#" class="a_demo_one">
                            Click me!
                        </a>
                    </p>
<div>


......................................Barra Separadora no Planeada........................



Codigo para Estilo 2
CSS
Código:
@charset "UTF-8";
/* CSS Document */

/*
DEMO 2
*/

.a_demo_two {
   background-color:#3bb3e0;
   padding:10px;
   position:relative;
   font-family: 'Open Sans', sans-serif;
   font-size:12px;
   text-decoration:none;
   color:#fff;
   background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(44,160,202)),
   color-stop(1, rgb(62,184,229))
   );
   -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
   -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
   -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
   box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
}

.a_demo_two::before {
   background-color:#072239;
   content:"";
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   padding-left:2px;
   padding-right:2px;
   padding-bottom:4px;
   left:-2px;
   top:5px;
   z-index:-1;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -o-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: 0px 1px 0px #fff;
   -moz-box-shadow: 0px 1px 0px #fff;
   -o-box-shadow: 0px 1px 0px #fff;
   box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active {
   color:#156785;
   text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
   background:rgb(44,160,202);
   -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
   -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
   -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
   box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
   top:7px;
}

.a_demo_two:active::before {
   top:-2px;
}



Html para estilo 2
Código:
<div id="container_buttons">
                    <p>
                        <a href="#" class="a_demo_two">
                            Click me!
                        </a>
                    </p>
<div>



......................................Barra Separadora no Planeada........................
Codigo para Estilo 3[b]
CSS
Código:

@charset "UTF-8";
/* CSS Document */

/*
DEMO 4
*/

.a_demo_four {
   background-color:#3bb3e0;
   font-family: 'Open Sans', sans-serif;
   font-size:12px;
   text-decoration:none;
   color:#fff;
   position:relative;
   padding:10px 20px;
   padding-right:50px;
   background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(44,160,202)),
   color-stop(1, rgb(62,184,229))
   );
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_four:active {
   top:3px;
   background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(62,184,229)),
   color-stop(1, rgb(44,160,202))
   );
   -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_demo_four::before {
   background-color:#2591b4;
   background-image:url(http://img.webme.com/pic/d/davixm/right_arrow.png);
   background-repeat:no-repeat;
   background-position:center center;
   content:"";
   width:20px;
   height:20px;
   position:absolute;
   right:15px;
   top:50%;
   margin-top:-9px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
   -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
   -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
   box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.a_demo_four:active::before {
   top:50%;
   margin-top:-12px;
   -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
   -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
   -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
   box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}


Html para Estilo 3
Código:
<div id="container_buttons">
                    <p>
                        <a href="#" class="a_demo_three">
                            Click me!
                        </a>
                    </p>
<div>

[b]......................................Barra Separadora no Planeada........................



Codigo para Estilo 4
CSS
Código:
@charset "UTF-8";
/* CSS Document */

/*
DEMO 3
*/

.a_demo_three {
   background-color:#3bb3e0;
   font-family: 'Open Sans', sans-serif;
   font-size:12px;
   text-decoration:none;
   color:#fff;
   position:relative;
   padding:10px 20px;
   border-left:solid 1px #2ab7ec;
   margin-left:35px;
   background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(44,160,202)),
   color-stop(1, rgb(62,184,229))
   );
   -webkit-border-top-right-radius: 5px;
   -webkit-border-bottom-right-radius: 5px;
   -moz-border-radius-topright: 5px;
   -moz-border-radius-bottomright: 5px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
   top:3px;
   background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(62,184,229)),
   color-stop(1, rgb(44,160,202))
   );
   -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_demo_three::before {
   background-color:#2561b4;
   content:"1";
   width:35px;
   max-height:29px;
   height:100%;
   position:absolute;
   display:block;
   padding-top:8px;
   top:0px;
   left:-36px;
   font-size:16px;
   font-weight:bold;
   color:#8fd1ea;
   text-shadow:1px 1px 0px #07526e;
   border-right:solid 1px #07526e;
   background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
   background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(10,94,125)),
   color-stop(1, rgb(14,139,184))
   );
   -webkit-border-top-left-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
   -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
   -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
   box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
   top:-3px;
   -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
   -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
   -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
   box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

/*
Second button
*/

.second_button::before {
   content:"2";
}

/*
Third button
*/

.third_button::before {
   content:"3";
}


Html para etilo 4
Código:
<div id="container_buttons">
                    <p>
                        <a href="#" class="a_demo_four">
                            Click me!
                        </a>
                    </p>
<div>

......................................Barra Separadora no Planeada........................




Codigo para Estilo 5
CSS
Código:
@charset "UTF-8";
/* CSS Document */

/*
DEMO 5
*/

.a_demo_five {
   background-color:#3bb3e0;
   width:150px;
   display:inline-block;
   font-family: 'Open Sans', sans-serif;
   font-size:12px;
   text-decoration:none;
   color:#fff;
   position:relative;
   margin-top:40px;
   padding-bottom:10px;
   padding-top:10px;
   background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(44,160,202)),
   color-stop(1, rgb(62,184,229))
   );
   -webkit-border-bottom-right-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_five:active {
   top:0px;
   background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(62,184,229)),
   color-stop(1, rgb(44,160,202))
   );
   -webkit-box-shadow: inset 0px 4px 1px #0b698b, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   -moz-box-shadow: 0px 2px 0px 1px #156785, 0px 5px 3px #999;
   -o-box-shadow: 0px 2px 0px 1px #156785, 0px 5px 3px #999;
   box-shadow: inset 0px 4px 1px #0b698b, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
.a_demo_five::before {
   background-color:#fff;
   background-image:url(http://img.webme.com/pic/d/davixm/heart.gif);
   background-repeat:no-repeat;
   background-position:center center;
   content:"";
   width:150px;
   height:40px;
   position:absolute;
   top:-30px;
   left:0px;
   margin-top:-11px;
   z-index:-1;
   -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}
.a_demo_five:active::before {
   top: -30px;   
   -webkit-box-shadow: 0px 3px 0px #ccc;
   -moz-box-shadow: 0px 3px 0px #ccc;
   -o-box-shadow: 0px 3px 0px #ccc;
   box-shadow: 0px 3px 0px #ccc;
}


Html para Estilo 5
Código:
<div id="container_buttons">
                    <p>
                        <a href="#" class="a_demo_five">
                            Click me!
                        </a>
                    </p>
<div>

......................................Barra Separadora no Planeada........................

http://www.mediafire.com/?cxmtjp4qyi0ofpj


ANTES DE QUE TE VAYAS DIME SI TE GUSTA MIS APORTES Y SIGO APORTANDO EN EL FORO Y CONTENIDO EN MI WEB

Mis Aportes
http://www.paginawebgratis.es/forum/search.php?mode=results
______________
WebTwo de RadioVijaer.


Ultima edición por davixm el Lun Ene 30, 2012 7:35 pm; editado 1 vez
↑
Mensaje31-01-2012, 02:43 (UTC)    
Título del mensaje: hola
Responder citando
muy buen aporte gracias
↑
Mensaje31-01-2012, 02:47 (UTC)    
Título del mensaje: Re: hola
Responder citando
Bastante buenos che, los tendre en cuenta para mi web
Gracias por tu aporte.
______________
Es una reina, es una reina, fiesta fiesta. Tito el bambino
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.