1

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 &nbsp;
                    <i class="fas fa-arrow-right">
                    </i>
                </a>
            </div>
        </div>
    </div>
2
  • what do you dev tools say about the after pseudo? Does it appear at all?
    – JSRB
    May 9, 2020 at 18:53
  • yes it appears, but i think it is behind the modal.and only the button itslef shows on top. May 9, 2020 at 18:54

1 Answer 1

1

Basically you need to specify z-index:1 for boton-cabezera a style and also set z-index:0 for .boton-cabezera:after style

Demo

.boton-cabezera a {
    /*...Other Styles...*/
    
   z-index: 1;
  
}

.boton-cabezera:after {
    /*...Other Styles...*/
    z-index: 0;
}

1
  • Welcome. Please close your question by clicking the checkmark to the left of the answer.
    – Zain Zafar
    May 9, 2020 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.