CSS - Tutorial

Crear dos botones usando PseudoElementos

---

Compartir:  

Vamos a crear dos botones utilizando CSS para crear un efecto bastante genial. En la parte inferior esta el video que muestra la forma de crear los botones para mayor claridad.

Vamos a crear dos botones utilizando CSS para crear un efecto bastante genial. En la parte inferior esta el video que muestra la forma de crear los botones para mayor claridad.

Iniciamos creando en un html dos botones desde la etiqueta <a>

<div class="col-6 text-center">
 <h3>Botón 1</h3>
 <p class="boton1">
 <a href="#">Soy el botón número 1</a>
 </p>
 </div>
 <div class="col-6 text-center">
 <h3>Botón 2</h3>
 <p class="boton2">
 <a href="#">Soy el botón número 2</a>
 </p>
 </div>

Botón número 1

Iniciemos creando el estilo al primer botón

.boton1{
 background-color: #40e03b;
 font-family:'Open Sans',sans-serif;
 font-size: 12px;
 text-decoration: none;
 color: #ffffff;
 position: relative;
 padding:10px 20px;
 border-left:solid 1px #09a009;
 margin-left:35px;
 background-image: linear-gradient(bottom,rgb(49,202,44)0% rgb(35,146,25)100%);
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 box-shadow: inset 0px 1px 0px #2aec34, 0px 5px 0px 0px #158515, 0px 10px 5px #999;
}

Luego le creamos el estilo al boton en el momento de ser presionado.

.boton1:active{
 top:3px;
 background-image: linear-gradient(bottom,rgb(49,202,44)0% rgb(35,146,25)100%);
 box-shadow: inset 0px 1px 0px #2aec34, 0px 2px 0px 0px #158515, 0px 5px 3px #999;
}

Luego creamos la parte inicial del botón con el pseudo elemento before.

.boton1::before{
 background-color: #b42525;
 content:"1";
 width:35px;
 max-height: 40px;
 height: 100%;
 position:absolute;
 display: block;
 padding-top: 8px;
 top:0px;
 left: -36px;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 text-shadow: 1px 1px 0px #6e0707;
 border-right: solid 1px #6e0707;
 background-image: linear-gradient(bottom,rgb(125,10,10)0%,rgb(184,14,14)100%);
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
 box-shadow: inset 0px 1px 0px #ec2a2a, 0px 5px 0px 0px #3a0303,0px 10px 5px #999;
}

Ahora creamos el estilo para el pseudo elemento al ser oprimido.

.boton1:active::before{
 top:-3px;
 box-shadow: inset 0px 1px 0px #ec2a2a,0px 5px 0px 0px #3a0303, 1px 1px 0px 0px #640404, 2px 2px 0px 0px #640404,2px 5px 0px 0px #640404,6px 4px 2px #0b8b20,0px 10px 5px #999;
}

y listo nuestro primer boton.

---

Botón número 2

Ahora vamos a crear el segundo boton.

Iniciemos creando el estilo base del botón.

.boton2{
	background-color: #40e03b;
	font-size: 12px;
	text-decoration: none;
	color: #fff;
	position: relative;
	padding: 10px 20px;
	padding-right:50px;
	border-radius: 5px;
	box-shadow: inset 0px 1px 0px #2aec34, 0px 5px 0px 0px #158515, 0px 10px 5px #999;
}

Luego procedemos a darle el efecto cuando se hace click sobre el.

.boton2:active{
	top:3px;
	background-image: linear-gradient(bottom,rgb(49,202,44)0% rgb(35,146,25)100%);
	box-shadow: inset 0px 1px 0px #2aec34, 0px 2px 0px 0px #158515, 0px 5px 3px #999;
}

Ahora vamos a darle estilo al pseudo elemento before de este botón.

.boton2:active::before{
	top:50%;
	margin-top:-12px;
	box-shadow: inset 0px 1px 0px #f06060,0px 3px 0px #710e0e,0px 6px 3px #0a8815;
}

Y listo asi creamos nuestros dos botones de manera sencilla y aspecto super genial.

Compartir:  

Suscribete a mi canal