Crear dos botones usando PseudoElementos

Crear dos botones usando PseudoElementos

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::before{
	background-color: #b42525;
	background-image: url(../images/feliz.png);
	background-repeat: no-repeat;
	background-position: center center;
	content:"";
	width: 20px;
	height: 20px;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -9px;
	border-radius: 50%;
	box-shadow: inset 0px 1px 0px #560505,0px 1px 0px #f06060;	
}

Ahora vamos a modificar su comportamiento en el evento click.

.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.

Aquí puedes encontrar el video que explica el procedimiento.

Suscribete a mi canal



Aqui tienes el codigo fuente desde gitlab

Link codigo fuente: https://gitlab.com/edisonjsapps/botones-pseudoelementos

Si fue útil el tutorial deja un comentario y si te gusto puedes también suscribirte a nuestro newsletter para que no te pierdas ningún tutorial y suscribete a mi canal de youtube

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *