I've made the following buttons with CSS: Screenshot of the buttons
With the follwing CSS code:
.boton-cabezera {
position: relative;
display: inline-block;
margin: 0px 8px 15px;
}
.boton-cabezera a {
color: white;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
text-align: center;
text-decoration: none;
background-color: #FFA12B;
display: block;
position: relative;
padding: 12px 12px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: 0px 1px 0px #000;
filter: dropshadow(color=#000, offx=0px, offy=1px);
-webkit-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
-moz-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.boton-cabezera a:active {
top: 10px;
background-color: #F78900;
-webkit-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
-moz-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}
.boton-cabezera:after {
content: "";
height: 100%;
width: 100%;
padding: 4px;
position: absolute;
bottom: -14px;
left: -4px;
z-index: -1;
background-color: #2B1800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
To create a button you just need to create a 'div' with the class "boton-cabezera" and add a 'a' tag.
When pressed the buttons look like this: Screenshot of button pressed.
I've made this buttons for a minesweeper game.
My problem is that one of the buttons used in the game doesn't look like my other buttons. I think it is a z-index problem, but I can't seem to figure it out on my own.
I've made a modal that asks for the players name when he ends the game. Screenshot of the modal and the button. As you can appreciate in the SS the button doesnt look like the ones in the header. It doesn't have that button container look. The ":after" that ive included in the CSS seems to not be working here.
Here is the modal CSS code:
.mensaje-bg {
/*El display se cambia a block con jquery*/
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
}
.mensaje {
background-color: #f4f4f4;
margin: 12% auto;
padding: 20px;
width: 380px;
height: 260px;
border: solid #0f0f0f 2px;
border-radius: 3px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
border-bottom: solid 5px black;
}
And here is the HTML code for the modal part:
<div id="mensaje-bg" class="mensaje-bg">
<div class="mensaje">
<estado-carita id="emoji">
<i class="fas fa-frown"></i>
</estado-carita>
<estado-final id="estado-final">
¡Perdiste!
</estado-final>
<tiempo-total id="tiempo-total">
Tu tiempo fue de 00:00 en dificultad media.
</tiempo-total>
<label id="label-nombre" for="nombre">¿Cual es tu nombre?</label>
<input id="j" type="text" placeholder="Tu nombre">
<div class="boton-cabezera">
<a href="#" id="siguiente" class="nuevo_juego">
Siguiente
<i class="fas fa-arrow-right">
</i>
</a>
</div>
</div>
</div>
after
pseudo? Does it appear at all?