Fala pessoal, agora que a gente já aprendeu os princípios do BAM vamos lá para uma aula mais prática aqui onde a gente vai ver o próprio componente da interface de usuário vou usar o JSferol.net, se quiser que você saça esse cara aqui, só aí nesse link JSferol.net-nbcarrow-esse-negoce aqui então vamos lá, então a gente já tinha feito no interior esse botão com um azul do bootstrap, vou tirar esse aqui, esse cara aqui, então agora eu quero partir para a gente fazer o nosso próprio botão, então já tenho aqui as seguintes classes, certo? Eu tenho a classe para o botão, nesse caso aqui esse cara é o que? É o bloco, aí você tem esses tiles, codefundo cinza, adiciona a borda, borda arredondada, bootcursor para esse cara aqui, pondo, a display inline block, ele não poder tomar toda a linha e um pairing para adicionar espaço ao redor da texta, esse cara vai ser quem? Vai ser o bloco, não é o bloco? Agora dentro do bloco tem um elemento que é o texto, então a gente usa o underscore no score, texto, para esse cara você vai definir mais outros tiles, que está aqui, nesse caso eu defino a cor de texto como 040404, note que você também poderia definir a cor do texto, do próprio bloco do botão, mas escolhi mais específico aqui para ser o próprio texto, então esse aqui é um elemento, elemento sempre pertence a um bloco, nesse caso o bloco do botão e eu tenho um elemento que é o texto, agora se a gente quiser modificar por exemplo o bloco, eu quero que esse botão tenha outra aparência, aparência por exemplo da desucessa, no bootstrap esse verdinho aqui, então eu vou fazer aqui, é o seguinte, não mais maneiro que a gente fez anteriormente, deixa eu adicionar esse outro cara para você ver, então você vai fazer o bloco de maneira e adicionar uma classe adicional com modificador sucesso por exemplo, eu dei nome para o modificador de sucesso, sucesso você define a classe com o background light green que no meu caso, é um verde assim, certo? Aí para mudar a cor do texto eu só adicionei um modificador ao elemento, botão underscore underscore text que é o elemento prefix, seguido do traço-traço sucesso que é uma classe modificadora, sempre tem que ter classe adicional, não se esqueça disso, não pode ter dessa maneira aqui, está errado, certo? Agora vamos ver o que dá, eu vou dar o run aqui, então aqui o outro botão, esse outro botão vai ter não só essa classe aqui por exemplo para o bloco, ele vai pegar esse cara e adicionar o background cola, vai mudar o background cola do botão de cinza para light green, note que a classe seguida tem para essa adência, então esse background cinza vai ser, não vai ser aplicado ao invés disso vai ser aplicado o background color da classe modificadora sucesso, mesma coisa para o botão texto de sucesso, nesse caso aqui eu botei com preto, se você quiser visualizar o primeiro aqui para você ver que realmente muda, então adicione a classe modificadora que vai modificar a cor original do texto ao invés de aplicar esse estilo de 040404 para a cor, vai ser a cor preta 0 0 0 0 0, certo? Agora se você quiser por exemplo, você quer que o botão tenha as letras maiúsculas, todas as letras, você pode sim ter vários, mais de um modificador, por exemplo, para poder fazer letra maiúscula você pode adicionar aqui outro modificador, por exemplo, botão, texto, esse pertence, esse elemento modificador, letra maiúscula, maiúscula, eu defini esse cara dessa maneira aqui, esse é o modificador, ou eu defini no botão, então deixa eu por no botão ao invés tanto faz, certo? Então eu vou remover esse cara, se você botar no botão, você vai sonar aqui, aqui em vez do texto vai ser o próprio bloco que vai ser modificado com letra maiúscula, certo? Vai ser o bloco-botão, vou dar o run, agora você note que todas as letras do botão são maiúsculas agora, são maiúsculas, então note sempre ter que adicionar uma classe seguida das originais do próprio bloco nesse caso, porque não há modificador por si próprio, não pode ter modificador por si próprio, não pode ter elemento por si próprio, elemento sempre pertence a um bloco, modificador sempre é adicionado para modificar um bloco ou um elemento, tá certo? Então é isso por essa aula, é só e até a próxima!