Botones 3 estilos CSS

Hermosos botones para insertar en nuestro Blog los cuales tienen un aspecto muy atractivo para nuestras paginas.

See the Pen css3 buttons by Carlos Andres Alzate (@CarlosAndresAlzate) on CodePen.

CODIGO HTML

 
  <body id="body">
    <div class="container" id="container">
        <h1 id="text">Botones en CSS3</h1>
        <div id="botones">
            <button type="button" id="azul">Botón 1</button>
            <button type="button" id="rosa">Botón 2</button>
            <button type="button" id="rojo">Botón 3</button>
        </div>
    </div>
    <script src="js/script.js" type="text/javascript"></script>
  <link href="https://file.myfontastic.com/H3oEmratEBSgg5FmSuiw5m/icons.css" rel="stylesheet"/>
</body>

CODIGO CSS

 
<link rel="canonical" href="https://codepen.io/CarlosAndresAlzate/pen/wGabWm"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'/>
<style>
/***********************************
GENERALES
***********************************/
body {
    background: #212121;
    width: 100vw;
    height: 100vh;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
    font-family: 'avenirLTStd-Book', serif;
}
a {
    text-decoration: none;
    color: aliceblue;
}
h1 {
    color: #f0f8ff;
    font-family:'Helvetica LT Std', sans-serif;
    font-size: 60px;
    text-align: center;
}
.container {
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    min-height: 50vh;
}
div:nth-child(2) {
    width: 100%;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 16px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-evenly;
    gap: 10px;
    padding: 4em 1em;
}
/***********************************
BOTONES
***********************************/
/* Botón - General */
button {
    border: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.5em;
    width: calc(100%/4);
    min-width: 120px;
    color: aliceblue;
    outline: none;
    box-shadow: 0 0 10px #000;
    transition: all .4s ease-in-out;
}

/* Botón - 1 */
button:nth-child(1) {
    background: -webkit-radial-gradient(50%, ellipse cover, #4981b9, #273d63);
    background: -moz-radial-gradient(50%, ellipse cover, #4981b9, #273d63);

    height: 50px;
    border-radius: 15px;
}
button:nth-child(1):hover {
    background: -webkit-radial-gradient(50%, circle cover, #4981b9, #273d63);
    background: -moz-radial-gradient(50%, circle cover, #4981b9, #273d63);
    transform: scale(1.1);
}

/* Botón - 2 */
button:nth-child(2) {
    background: linear-gradient(#ed8c83, #e4685d);
    border: 1px solid rgb(255, 68, 68);
    border-radius: 10px;
    height: 60px;
    font-weight: 900;
}
button:nth-child(2):hover {
    background: linear-gradient(#e4685d, #ed8c83);
    transform: rotate(5deg);
}
  
/* Botón - 3 */
button:nth-child(3) {
    height: 70px;
    border-bottom: 6px solid rgb(138, 42, 33);
    border-right: 6px solid rgb(138, 42, 33);
    background: linear-gradient(#d33426, #f04a3c);
    border-radius: 25px;
}
button:nth-child(3):hover {
    background: linear-gradient(#f04a3c, #d33426);
    border-bottom: none;
    border-right: none;
}
</style>

CODIGO SCRIPT

 
      <script id="rendered-js" >
/*Variables de colores*/
var colores = [
["#2ecc71", "#27ae60"],
["#1abc9c", "#16a085"],
["#e74c3c", "#c0392b"],
["#9b59b6", "#8e44ad"],
["#66cc66", "#17ad49"],
["#2A7E64", "#267359"],
["#4F82C4", "#6289CB"]];
/*Funciones primarias*/
function randomNum(e) {
  return Math.floor(Math.random() * e.length + 1 - 1);
}
console.log(randomNum(colores));
function randomBackgroundColor() {
  var ranNum = randomNum(colores);
  return colores[ranNum];
}
function randomTituloColor() {
  var ranNum = randomNum(colores);
  return colores[ranNum];
}
/*variables de elementos id*/
var bodyColor = document.getElementById('body');
var botones = document.getElementById('botones');
var azul = document.getElementById('azul');
var rosa = document.getElementById('rosa');
var rojo = document.getElementById('rojo');
var text = document.getElementById('text');
/*funciones para uso de elemntos*/
azul.onclick = function () {
  var ranColor = randomBackgroundColor();
  bodyColor.style.backgroundColor = ranColor[0];
};
rosa.onclick = function () {
  var ranColor = randomBackgroundColor();
  botones.style.backgroundColor = ranColor[0];
};
rojo.onclick = function () {
  var ranText = randomTituloColor();
  text.style.color = ranText[1];
};
//# sourceURL=pen.js
    </script>

ORIGEN DE LA ENTRADA: https://codepen.io/CarlosAndresAlzate/pen/wGabWm

Bienvenidos !

Suscripción

Sociales

Personalización de Blogger

Diseño de Blogger

Aqui el titulo

Aqui el titulo

Menu vertical.

Foto de perfil

Recomendar web por correo

Botones 3 estilos CSS

Hermosos botones para insertar en nuestro Blog los cuales tienen un aspecto muy atractivo para nuestras paginas.

CODIGO HTML

CODIGO CSS

CODIGO SCRIPT

No hay comentarios:

Publicar un comentario

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

Author Details

Archivo del blog

Popular

Recent

Comments

Tags

LA MILLOR TERRA DEL MON

HOJA DEL LUNES

VALENCIA BONITA

SENDAS Y LEYENDAS

EL ESPAÑOL

LES MUNTANYES

INFORMACION

ALICANTE PLAZA

LAS PROVINCIAS

Formulario de contacto

Vistas de página en total

Bienvenidos !

Suscripción

Sociales

Personalización de Blogger

Diseño de Blogger

Aqui el titulo

Aqui el titulo

Menu vertical.

Foto de perfil

Recomendar web por correo

Botones 3 estilos CSS

Hermosos botones para insertar en nuestro Blog los cuales tienen un aspecto muy atractivo para nuestras paginas.

CODIGO HTML

CODIGO CSS

CODIGO SCRIPT

No hay comentarios:

Publicar un comentario

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

Author Details

Socialize

Archivo del blog

Popular

Recent

Comments

Tags

LA MILLOR TERRA DEL MON

HOJA DEL LUNES

VALENCIA BONITA

SENDAS Y LEYENDAS

EL ESPAÑOL

LES MUNTANYES

INFORMACION

ALICANTE PLAZA

LAS PROVINCIAS

Formulario de contacto

Vistas de página en total