1
resposta

Sugestão para a imagem do botão descartar

Fiz o código de uma forma mais simples que o do vídeo e queria deixar de sugestão...

HTML:


```<div class="container-botões">
                    <button class="botão-descartar">
                        Descartar
                        <img src="./img/trash.svg" alt="lixeira">
                    </button>
                    <button class="botão-publicar">
                        Publicar
                        <img src="./img/arrow_forward2.svg">
                    </button>
                </div>"

CSS:

".botão-descartar {
    background-color: var(--itens-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;

    display: flex;
    align-items: center;
    gap: 12px;
}
.botão-descartar img {
    width: 15px;
    height: 18px;
}
.botão-publicar {
    background-color: var(--primary-color);
    color: var(--itens-background);
    border: 1px solid var(--primary-color);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font: 1em;

    display: flex;
    align-items: center;
    gap: 12px;
}
.botão-publicar img {
    width: 15px;
    height: 18px;
}
1 resposta

Olá Rafael! Tudo bem?

Que bacana que você está explorando diferentes formas de implementar os botões no seu projeto! Sua sugestão de adicionar uma imagem ao lado do texto no botão "Descartar" é uma ótima ideia para melhorar a interface do usuário.

Muito obrigada por compartilhar sua sugestão com o fórum, pode ajudar muitos outros estudantes :)

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!