Desafio

Olá Hevlina, como vai? Espero que esteja bem!

Que bom que você realizou a atividade, é isso aí! Espero que continue se dedicando aos estudos e colocando em prática seus aprendizados.

Caso surja alguma dúvida, fico à disposição.

Abraços e bons estudos!

Percebi que no exemplo do desafio há uma leve transição entre as cores quando aplicado o hover, pesquisei na net como fazer usado o seguinte código:

            .btn-main {
                width: 280px;
                height: 66px;
                color: #FFF;
                border: none;
                outline: none;
                border-radius: 66px;
                background: variaveis.$cor-terciaria;
                font-size: 1.3rem;
                transition: 0s background-color;

                &:hover{
                    transition-delay: 1s;
                    transition-property: background-color;
                    background: variaveis.$cor-secundaria;
                    color: #FFF;
                }
            }
        }

Mas não obtive o resultado esperado, a transição fica "seca, dura" e não fluídica como no Gif do Desafio.

André, eu testei o seu scss e fiz as seguintes alterações para que a transição funcionasse: (Obs: pode alterar o .3s por outro valor se quiser que a transição seja mais lenta/rápida)

  .btn-main {
                width: 280px;
                height: 66px;
                color: #FFF;
                border: none;
                outline: none;
                border-radius: 66px;
                background-color: variaveis.$cor-terciaria;
                font-size: 1.3rem;
                transition: .3s background-color;

                &:hover{
                    background-color: variaveis.$cor-secundaria;
                    color: #FFF;
                }
            }
        }