CSS Botao after e hover

MurilloBreak44 · 9 de fevereiro de 2021

Eu queria colocar essa borda preta do botao atras dele mas nao estou conseguindo alguem me ajuda? (eu uso Sass)

.btn,.btn-secondary{
    display: inline-block;
    padding: 12px 30px;
    border-radius: 10px;
    text-transform: uppercase;
    background: #C4C4C4;

    position: relative;

    &::after{
        content: '';
        display: block;
        position: absolute;
        top: -3px;
        left: -10px;

        width: 100%;
        height: 100%;
        border-radius: 10px;

        background-color: black;

    }
}

        <section class="container">
            <div class="container-item-1">
                <p>
                <img src="img/logo1.png" onload="SVGInject(this)" />
                </p>
                <p>
                    <a href="" class="btn">Pre-order now</a>
                    <a href="" class="btn-secondary">Watch the teaser</a>
                </p>
            </div>
            <div class="container-item-2">
                <img src="svg/perssonagem.svg" onload="SVGInject(this)" />
            </div>
        </section>

Marcelo Calazans · 9 de fevereiro de 2021

Veja se é isso:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>
.btn,.btn-secondary{
    display: inline-block;
    padding: 12px 30px;
    border-radius: 10px;
    text-transform: uppercase;
    background: #C4C4C4;

    position: relative;
    
    -webkit-box-shadow: -11px -11px 1px 0px rgba(0,0,0,0.95);
    -moz-box-shadow: -11px -11px 1px 0px rgba(0,0,0,0.95);
    box-shadow: -11px -11px 1px 0px rgba(0,0,0,0.95);

    
}
</style>

        <section class="container">
            <div class="container-item-1">
                <p>
                <img src="img/logo1.png" onload="SVGInject(this)" />
                </p>
                <p>
                    <a href="" class="btn">Pre-order now</a>
                    <a href="" class="btn-secondary">Watch the teaser</a>
                </p>
            </div>
            <div class="container-item-2">
                <img src="svg/perssonagem.svg" onload="SVGInject(this)" />
            </div>
        </section>

</body>
</html>