Ir ao conteúdo

Posts recomendados

Postado

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>

 

image.png

imagem_2021-02-09_113431.png

Postado

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>

 

Se for, estude melhor o box-shadow:.

 

Abraços.

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!