Botones 3 estilos CSS

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

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

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

No hay comentarios:

Publicar un comentario

Author Details

Archivo del blog

Responsive Navigation Sliding Tabs

Image Cards CSS

Profile Card

Popup CSS Only

Aviso de Cookies 2024

Tags

LAS PROVINCIAS

LA MILLOR TERRA DEL MON

HOJA DEL LUNES

VALENCIA BONITA

SENDAS Y LEYENDAS

EL ESPAÑOL

LES MUNTANYES

INFORMACION

ALICANTE PLAZA

LAS PROVINCIAS

LA MILLOR TERRA DEL MON

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

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

No hay comentarios:

Publicar un comentario

Author Details

Socialize

Archivo del blog

Tags

LA MILLOR TERRA DEL MON

Formulario de contacto

Vistas de página en total