Projetos criativos de animação de botão CSS: efeitos hover com transição e transformação

1. Apresentação: Olá, pessoal. Eu sou Join the Shortcut E bem-vindo ao empolgante curso sobre botões CSS animados de Hobart. Nesta aula, você mergulhará profundamente no mundo da microinteração criando 20 projetos de microinteração criando animação de botões diferentes, todos usando apenas transição e transformação de CSS. As animações de Hobart podem parecer pequenas, mas elas têm um impacto enorme na experiência do usuário Seja você um iniciante tentando aumentar o nível seu jogo de CSS ou uma pilha de Db em busca de inspiração de design Este curso é para você. Cada projeto é curto, prático e repleto de três efeitos de dicas. De botões de crescimento a bolos deslizantes, ícones giratórios, efeito de salto Você aprenderá a usar um código CSS real e aprenderá como transformar os botões de embarque em algo atraente e interativo Sem bibliotecas, sem estruturas, magia CSS. Então, você está pronto para adicionar algum tópico de animação aos seus designs da web? Vamos começar a programar. 2. Efeito de botão rotativo criativo usando CSS: Portanto, este é nosso primeiro projeto usando propriedades de transformação CSS. Não vamos usar o quadro-chave para animar o elemento. Então, como você pode ver neste exemplo, aqui criamos um botão. Se eu abrir meu carro neste botão, aqui você pode ver um lindo efeito de transição de botão. Então, vamos construir hoje neste projeto. Então, vamos ao editor de código do isal Studio e ver como podemos criar esse projeto Então, como você pode ver, eu já abri meu editor de código isal Studio E eu já crio um arquivo HTML chamado index dot TML. Além disso, criamos outro estilo de arquivo CSS com pontos, e eu já abro este site usando meu servidor ativo. Este é o nosso site. Está completamente em branco. Em seguida, vamos voltar ao código do estúdio do usuário. Primeiro, dentro da minha tag corporal, vou adicionar uma tag NCat, A e HI Dentro dessa tag Anca, vou digitar hover Me. Em seguida, vou entrar no estilo de arquivo CSS CSS. Eu já vinculo esse arquivo a este documento ESTeML. Aqui vamos começar esse estilo. No começo, vou mirar na etiqueta corporal. Então, dentro da lista, vou atribuir altura, altura e vou atribuir 100 VH Quero colocar a tag âncora no meio desta página, então vou usar a propriedade Os flocos de exibição justificam o conteúdo, justificam o centro de conteúdo. Além disso, vou usar alinhar item, alinhar itens ao centro. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, como você pode ver, ele centralizou o texto, eu centralizei a tag âncora Agora vou abrir meu navegador e meu editor de código lado a lado. Como você pode ver, aqui abrimos meu navegador e meu editor de código lado a lado para nossa conveniência. Usando o flexbox, centralizamos esse elemento no meio desta página horizontal Basicamente, não tem nada a ver com animação. Se você quiser aprender flexbox e greet, você pode se inscrever em meus Agora, vamos estilizar o vazamento. Quero direcionar esse link usando seu nome de tag A e, dentro dos cálices, primeira propriedade, vou usar decoração de texto, decoração texto, decoração de texto, none, e vou definir esse Se eu definir esse arquivo, como você pode ver, ele removerá esse sublinhado do texto Depois disso, vou atribuir uma cor de fonte. Então digite a cor e eu vou atribuir a cor preta. Eu quero usar uma fonte de cor preta para este exemplo. Em seguida, vou definir a família da fonte, a família da fonte e quero usar a fonte aérea, aérea Depois disso, vamos ativar o problema Raf View e Waraph Depois disso, vou atribuir o tamanho da fonte e o tamanho da fonte e quero atribuir o tamanho da fonte de 45 pixels, 45 pixels. Então eu quero atribuir Border. Fronteira. Eu quero uma borda sólida em pixels de luta , sólida e a cor da borda também é preta. Preto. Então eu quero definir o preenchimento. Adicionando de cima para baixo, vou definir 30 pixels e da esquerda e da direita, vou atribuir 80 pixels. Por fim, fornecerei a posição desse elemento, algum tipo de posição relativa. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Agora, para criar um belo fundo verde, precisamos usar o pseudo elemento anterior Se você não conhece nenhum conhecimento sobre pseudoelementos, é permitido criar antes do elemento EstiML, caso contrário, após o elemento estimal usando CSS Então, vou selecionar a tag âncora e aqui vou usar antes da classe p zero antes de d dentro do alias, aqui vou usar uma propriedade chamada content, content, e é um conteúdo vazio E para definir o conteúdo vazio, precisamos usar códigos de policiais individuais Depois disso, precisamos definir a posição da posição e eu vou usar absoluto. Além disso, preciso definir a posição inicial, então vou digitar laboratório zero e, de cima, também zero. Então, agora temos nosso pseudo elemento anterior e sua posição é o canto superior esquerdo deste link Agora, antes que o psudoelement seja colocado no canto superior esquerdo deste link Agora, vamos adicionar a cor de fundo. Cor de fundo em vez de usar verde, eu gostaria de usar a cor amarela. Eu já copiei um valor de Higa para essa cor de fundo e vou colá-lo aqui Ele vai retornar a cor laranja. E então vou atribuir altura a isso antes do elemento positivo, altura , 100%, e também a seguir, vou atribuir também 100%. E eu vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Portanto, agora você pode ver o elemento positivo anterior aparecendo como cor de fundo dessa etiqueta de âncora e também ocupar toda a largura e altura desse link Mas o problema é esse elemento, altura do texto dessa tag âncora Aqui não podemos ver a palavra Hoberm. Podemos consertá-lo facilmente. Se eu passar, se eu usar esse índice Z de propriedade e se eu usar menos um valor, defina esse arquivo Agora isso resolve o problema. Esse texto aparecerá novamente na frente desse fundo laranja, e agora precisamos girar esse fundo amarelo no sentido horário a partir dessa E precisamos girá-lo a partir do canto inferior do lábio. Então, primeiro, precisamos definir a origem da transformação a partir de qual posição eu quero transformar isso antes do elemento positivo, Sandro digite transform Oisin e eu vou fornecer o valor inferior deste canto . Em seguida, vou usar outra propriedade chamada transformar, transformar, e vou usar o valor de rotação, girar dentro dos versos redondos, quero girá-lo até Depois de definir esse arquivo, fica assim que eu girar esse elemento -90 graus a partir daquele canto e depois adicionarei a transição Transformação de transição, e eu quero atribuir mais uma vez para essa transição 1 segundo. Eu quero fazer a transição dessa propriedade de transformação por 1 segundo, então ela completará a rotação em 1 segundo. Em seguida, precisamos criar o seletor Huber. Se eu usar esse elemento , quero girá-lo até zero grau Para isso, aqui, vou digitar. Primeiro, vou selecionar a tag âncora, depois vou usar o seletor Huber, a classe HoberPosito, o Hover Depois disso, vou selecionar a aula anterior ao posito Então, dentro do carro, diz: vou usar a propriedade de transformação novamente, transformar e, novamente, vou usar o valor de rotação Desta vez, quero girar esse elemento até zero grau Quero dizer que quero mover esse elemento para a posição original Agora, depois de configurar esse arquivo, se eu passar o mouse sobre este link, você poderá ver o resultado Como você pode ver, quando eu coloco meu carro sobre esse elemento, ele gira o elemento anterior em zero grau. Então está funcionando. Mas o problema é que precisamos esconder esse fundo laranja fora dessa caixa, fora dessa área de fronteira. É muito simples esconder esse elemento. Para isso, você precisa ir para o seletor de âncora e aqui você precisa usar uma propriedade chamada Estoure aqui, e você precisa definir esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Basicamente, ele esconde o elemento fora dessa área de borda, mas se eu passar o cursor sobre esse elemento, você pode ver o resultado Desta vez, você pode ver esse lindo efeito rouco, efeito botão Huber Esse plano de fundo só é visível na área anctg. Fora da área de ancoragem, não é visível porque ocultamos esse elemento E se você quiser mudar a posição dessa rotação, sim, você pode. Deixe-me mostrar como, mas antes vou desrecomendar essa linha, porque precisamos entender como Agora, desta vez, quero girar esse elemento a partir desse canto inferior direito Então, em vez do canto inferior esquerdo, vou usar o canto inferior direito. Eu vou configurar este. E agora você pode ver que sempre que eu coloco minhas cartas nesse elemento, esse elemento de cor laranja gira a partir do canto inferior direito Mas se eu alterar o valor da rotação, se eu fizer 90 graus em vez de usar -90 graus e depois esse arquivo, você poderá ver o resultado diferente Desta vez, ele vai girar esse elemento de anti-glaucois Então, se eu pular meu carro nesse elemento, você pode ver o resultado. E se eu usar a propriedade overflow hidden, salvá-la novamente e mouse sobre meu carro ou esse botão, você poderá Então, aqui mudamos a posição da rotação, se eu mudar o valor dessa origem da transformação e o valor da transformação. Então é assim que podemos criar esse lindo efeito de passar o mouse sobre o botão sem usar animação, para usar propriedades de transição Usando a transição e o mouse, podemos fazer muitas coisas Isso é tudo para este tutorial. Em nosso próximo tutorial, abordaremos muitos projetos de animação. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 3. Efeito de botão de deslizamento usando CSS: Olá, pessoal. Neste projeto, vamos criar esse lindo e bonito Heft de deslizar Quando eu passo o mouse sobre este link, como você pode ver, um plano de fundo desliza suavemente até este botão e ele cobre o fundo do Além disso, é uma cor de texto de botão cafona. Quando eu removo minha casa, novamente, ela volta à sua própria posição. Vamos ver como podemos criar esse lindo Heft. Então, como você pode ver lado a lado, abro meu editor de código z sto e meu navegador usando a extensão Live Server e já crio um documento HTML chamado index dot TML Com isso, eu já incluo o arquivo CSS de estilo nesta página. Basicamente, vamos criar um botão de deslizar o Hoverifi Então, primeiro, na minha etiqueta corporal, vou adicionar uma etiqueta âncora, A, e o tipo herói passa o mouse sobre E eu vou configurar esse arquivo. Até configurar esse arquivo, como você pode ver na minha página, por padrão, ele o coloca aqui no canto do laptop. Em seguida, precisamos colocar esse link no meio desta página. Para isso, precisamos entrar no arquivo CSS tile dot. Aqui, vou selecionar o corpo da etiqueta corporal e, dentro das Maldições, vou atribuir altura ao nosso corpo Altura 100 VH, 100 pés de altura de visualização e exibição aqui, vou usar o flex Então justifique, contenha, justifique, contenha o centro. Além disso, vou usar outra propriedade chamada aligns align items center E eu vou configurar esse arquivo. configurar esse arquivo, é assim que ele se parece. Agora, ele coloca a tag âncora horizontal e verticalmente no meio Em seguida, precisamos tornar esse link mais agradável. Para isso, vou direcionar essa tag âncora usando seu nome de tag A. Então, dentro do recesso encaracolado, primeiro, quero remover o sublinhado dessa tag âncora Para isso, vou usar uma propriedade chamada decoração de texto. Decoração de texto, nenhuma. Depois disso, vou atribuir uma cor, cor, e quero atribuir um valor hexa, hashtag 35, 14 e 35 novamente É de cor roxa. Em seguida, vou atribuir a família de fontes à família e aqui vou atribuir a área. Fonte aérea Em seguida, vou atribuir o tamanho da fonte, tamanho da fonte de 40 pixels. Depois disso, depois disso, vou atribuir uma borda. Borda, eu quero uma borda sólida de três pixels. Vou usar a mesma cor de borda da fonte. Eu copio o hexa Velo e vou colar aqui. Então eu vou configurar esse arquivo. de configurar esse arquivo, ficou assim. Agora precisamos adicionar preenchimento nesse link angular. Para isso, vou digitar preenchimento. De cima para baixo, vou adicionar 40 pixels e da esquerda e direita, vou adicionar 80 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Também precisamos definir uma posição. Posição e posição, eu quero atribuir relativa. Além disso, precisamos atribuir a transição porque, sem a transição, não podemos animar esse botão Vou digitar a transição, vou adicionar tudo e vou executar por 1 segundo. Eu passo um e vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Agora está muito melhor e agora vamos trabalhar no Swipe Portanto, para a ideia por trás desse efeito esposa, precisamos criar um pseudo-elemento anterior Isso ocupará toda a largura e altura desse link. Em seguida, vamos traduzi-lo fora do link. E se passarmos o mouse sobre esse link , removeremos a tradução Então, ele vai voltar para seu próprio lugar. Agora, vamos criar o pseudo-elemento antes do pseudoelemento No começo, vou digitar, vou definir a tag âncora do que antes Então, dentro da classe, primeiro, precisamos criar um conteúdo vazio. Conter está vazio e é um conteúdo vazio. E assim faremos nesta linha. Então, precisamos definir a posição, posição e eu vou atribuir o absoluto. Em seguida, precisamos colocar esse elemento no canto superior do lábio. Aqui vou digitar lap t zero, top também zero, e vou atribuir altura, altura, 100% de largura, 100%. Então eu vou atribuir a cor de fundo, cor de fundo, e vou atribuir a mesma cor de fundo, então eu colo este link neste hexa V que vou definir este arquivo Depois de definir esse arquivo, como você pode ver, nosso pseudo-elemento aparece acima do Huber Mi e do texto da barra Precisamos usar o valor do índice Z para resolver o problema. Vou atribuir o índice Z e vou passar o valor menos um Vou configurar esse arquivo. Depois de definir esse arquivo, depois de definir esse arquivo, agora ele fica atrás do texto, mas não é visível por causa da cor do texto e a cor do plano de fundo é a mesma. E agora vamos criar esse efeito de deslizar a partir de agora, que será facilmente realizado pela transição Então, precisamos mover esse elemento da direção XXs. Então, vou usar a propriedade transform, transform, e vou usar translate X value, translate X, e aqui vou passar. -100% E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora é ir além da fronteira. Agora ele move esse elemento 100% lado do lábio porque usamos menos a largura Além disso, nosso texto é visível por causa da cor de fundo branco. Agora, ao passar o mouse sobre esse link, quero que o pseudo elemento anterior volte ao seu próprio lugar Também quero mudar a cor do texto para branco. Quando eu passar o mouse sobre esse link, então vou selecionar esse link, vou criar o seletor Hober no seletor vermelho, ATAC, dois pontos, Então, dentro da classe, vou transformar, transformar, traduzir X e amnopas zero Isso significa que ele voltará ao seu próprio lugar novamente. Além disso, quero adicionar um efeito de suavização, portanto, na transição. Com isso, precisamos definir o tempo, então vou definir 1 segundo. Então, depois de configurar esse arquivo, quando eu passo o mouse sobre este link, você pode vê-lo de volta ao seu próprio lugar novamente. Agora precisamos mudar a cor da fonte desse texto. Além disso, precisamos ocultar o plano de fundo fora do link. E é muito simples ocultar o elemento de transbordamento. Só precisamos entrar na tag âncora e , em seguida, usar a propriedade overflow overflow hidden E eu vou colocar esse arquivo. Altere esse arquivo, como você pode ver, ele oculta o elemento, o elemento anterior positivo. E se eu pular que meus carros estão neste texto, como você pode ver, novamente, esse slide aparece, está de volta ao seu próprio lugar. Portanto, o fundo é invisível do lado de fora, e também obtivemos o efeito que queremos. E, finalmente, vamos traçar o texto colorido. Então, primeiro, vou selecionar a tag âncora, A, passar o mouse Então, dentro do carro***, se eu tiver esse link, quero mudar a cor, a cor branca Vou configurar esse arquivo. Então, depois de definir esse arquivo, se eu passar o cursor sobre este link, como você pode ver, ele ficou branco e também aconteceu sem problemas porque adicionamos a transição toda em nossa tag âncora, Agora entendemos o conceito de efeito de deslizamento. Se você quiser mudar a direção, sim, você pode. Você pode facilmente mudar a direção. Você pode aparecer este, este slide do lado direito, também da parte superior e inferior. Agora vamos mudar a direção. Eu quero mostrar esse slide do lado direito. Para isso, você precisa alterá-lo em uma linha. Vou duplicar esta linha e comentar a anterior Esse é para lábio. Vou digitar meu comentário ao lado do lábio. Se eu alterar o valor, se eu torná-lo positivo, ele colocará este no lado direito. Depois de configurar esse arquivo, se eu voltar ao meu navegador e clicar aqui, agora você pode vê-lo vindo da direção oposta, do lado direito desta caixa. Então é assim que podemos mudar a direção. Espero que agora esteja claro para você como podemos criar esse efeito. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 4. Efeito de movimento de botão: Olá, pessoal. Neste vídeo, criaremos o lindo Haeffet Se eu passar minhas cartas sobre esse botão, você pode experimentar esse efeito Ha Então, vamos ver como podemos soldar esse lindo efeito. Então, como você pode ver, estamos no editor de código do meu estúdio de resultados. E aqui eu já abri meu documento HTML anterior no Exot TML Em nossa tag body, já criamos essa tag âncora. Além disso, vinculamos ao arquivo CSS Style Dot. E se eu pular para o arquivo CSS de estilo , como você pode ver, já alinhamos esses elementos âncora horizontal e verticalmente no meio desta Eu uso esse código porque não quero tornar nossos projetos muito longos. E agora vou focar nesse elemento âncora. Vou digitar A e, dentro da propriedade cliVSF, vou usar preenchimento, preenchimento vou atribuir 40 pixels da parte superior e inferior e 80 pixels da esquerda e Em seguida, vou usar outra propriedade chamada família de fontes. Família de fontes, vou usar o sensorial. São Salk. Em seguida, vou remover o sublinhado, então vou usar a decoração de texto Decoração de texto, nenhuma. Depois disso, vou definir o tamanho da fonte. Tamanho da fonte, tamanho da fonte e eu vou definir 45 pixels. Em seguida, vou adicionar uma cor a essa fonte. Alguns de vocês usam cores e, como cor, vou usar o valor hexa 26, 26, 26, esse código de cores, meio cinza escuro Em seguida, vou definir o espaçamento entre as letras Então, eu quero digitar o espaçamento entre letras e adicionar um espaçamento entre letras de dois pixels Em seguida, vou adicionar uma borda. Borda Eu quero adicionar cinco pixels e uma borda sólida, então. Além disso, nossa cor de borda é da mesma cor da fonte, copie o código de cores e eu vou colocá-lo aqui. Depois disso, precisamos definir a posição relativa e também definir a transição. Transição e eu quero fazer a transição por 1 segundo, uma é. Vou configurar esse arquivo. Depois de definir esse arquivo, esta é a aparência do nosso botão. Agora precisamos usar um pseudoelemento, e eu vou usar o pseudo-elemento anterior Isso nos permite criar um elemento antes do elemento. Vou criar a pose anterior para selecionar Eu vou, vou direcionar o elemento A, dois pontos, BF Então, dentro da primeira propriedade do alivss, vou usar para criar um tipo de conteúdo vazio, conteúdo de CONTEÚDO, e aqui vou criar um Em seguida, ponto e vírgula para finalizar essa linha. Depois disso, vou definir a posição. Posição, vou usar absoluta. Então, precisamos definir a posição em que eu quero colocar esse elemento, esse elemento de conteúdo vazio. Eu quero colocá-lo, eu quero colocá-lo naquele lugar naquela esquina. Então, do topo, eu vou passar de zero e da esquerda, eu vou passar também de zero. Então eu quero definir com e quero usar 100% do peso desse contêiner. 100%. Além disso, vou atribuir altura, altura e também 100%. Em seguida, precisamos definir uma cor de fundo para esse elemento. fundo e cor de fundo Como cor de fundo, quero atribuir a mesma cor de fundo, então copio esta. Eu colo este e também vou adicioná-lo à transição. Transição, quero fazer a transição por 1 segundo e vou configurar esse arquivo. Depois de definir esse arquivo, fica assim que nosso elemento cobre o texto D, e precisamos usar o valor do índice Z para criar ApirDtt Agora você não consegue mais ver o link, o texto do link porque esse elemento anterior aparece na frente dele e sabemos como resolver o problema usando o índice Z. Agora vamos falar sobre o campo de rotação. Você se lembra de girar x com o início de nossa seção anterior Já aprendemos girar x e girar Usando a rotação x, podemos girar nosso elemento ao longo do eixo X e, usando a rotação Y, podemos girar o elemento ao longo do nosso elemento ao longo do eixo X e, usando a rotação Y, podemos girar o elemento ao longo do eixo Y. Deixe-me te mostrar isso. Se eu abrir este site, este é o exemplo de rotação X. Se eu ouvir meu cursor sobre esse elemento de rotação x, você poderá É assim que ele gira. Eu giro esse elemento 80 graus e se eu girá-lo 90 graus, como você pode ver, e depois passar meus carros sobre ele, agora às vezes ele desaparece completamente Se eu girar esse elemento em 90 graus, ele fará com que ele desapareça da mesma forma. Se eu cursor no elemento de rotação Y, esta opção, como você pode ver, é assim que ele usa esse Isso é o que a rotação X e a rotação Y fazem. Agora vamos voltar ao código. Aqui, vou usar outra propriedade chamada transformar, transformar, e vou usar o valor rotacionar X, essa, vou girar esse elemento em 90 graus Vou configurar esse arquivo. Depois desse arquivo, como você pode ver, o elemento desaparece porque, como eu disse, se eu girar esse elemento em Xxs a partir do xs 90 graus, ele desaparecerá o Suponha que esse seja o elemento. Se eu girar o elemento a partir do xs a 90 graus, como você pode ver, o elemento desaparece Só você pode ver uma única linha. Então é isso que aplicamos nesse elemento. Isso desapareceu antes do pseudoelemento. Agora, se eu passar minha Kara sobre esse elemento, quero tornar o pseudo-elemento Para isso, vou criar um seletor Her tipo s e categoria A, depois vou criar um seletor Her hover e, em seguida, vou usar antes da positoclass anterior Então, dentro dos aliases vou usar a mesma propriedade transform, copiá-la e colá-la aqui, mas desta vez vou usar zero grau Vou fazer com que seja zero novamente. Zero DEG após definir este arquivo, se eu voltar ao meu navegador e meus cartões estiverem nesse elemento, como você pode ver, agora ele está de volta ao seu próprio lugar novamente Ele gira o elemento em zero grau. Agora você pode ver novamente, a altura do texto. Seja mais uma vez de transição, podemos experimentar essa rotação de forma muito suave. Além disso, precisamos alterar a cor do texto quando passamos o mouse sobre o link Precisamos convertê-lo em branco. Então, quando direcionamos o link, caso contrário, passe o mouse sobre o link, quente seguida, dentro do recesso de cores mudarei a cor e a deixarei Eu vou definir esses cinco. Em seguida, vou mover esse pseudo-elemento um passo para trás Então, aqui, vou digitar o índice Z menos um. Que o texto mostre na frente do elemento. Depois de definir esse arquivo, se eu passar meus carros sobre esse elemento, você poderá ver o resultado Você pode experimentar essa transição. Se eu passar o mouse sobre minhas cartas, ele gira o elemento em zero grau e também muda a cor do texto, e eu crio um lindo efeito de botão Agora o que? Se eu girar esse elemento em YXS, se você criar outro elemento Posido usando Uter, deixe-me mostrar. Vou duplicar esta seção e, desta vez, vou criar outro elemento acima do elemento Eu vou usar o seletor Ater, depois. Então, desta vez, vou girá-lo em YX. Y, 90 graus em YxS. Além disso, vou copiar esta seção, entendeu esta seção? Desta vez, vou passar o mouse sobre o Ater PositoGlass. E também precisamos alterar o valor da rotação. Precisamos fazer com que ele gire Y. E eu vou configurar esse arquivo Depois de definir este arquivo, se eu passar meu Carter sobre esse elemento, aqui você poderá experimentar um lindo efeito de botão Se eu passar meu carro sobre esse elemento, ele gira os dois Antes do elemento também o elemento posterior de 920 graus. É por isso que criou um lindo efeito de foco. Então, espero que agora esteja claro para você como podemos criar esse lindo efeito de passar o mouse sobre o botão Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 5. Efeito de botão brilhante: Olá, pessoal. Neste projeto, vamos criar esse efeito quando eu passar o mouse sobre este link Aqui você pode experimentar esse efeito. Agora deixe-me mostrar a demonstração de neve. O que exatamente está acontecendo aqui. Quando eu passo o mouse sobre este link, você pode experimentar esse resultado Depois que ela acessou este link, como você pode ver, ele mudou a cor de fundo. Além disso, você pode notar que há uma linha branca grossa inclinada 45 graus e ela passa pelo link ao mesmo tempo em que eu passo o mouse sobre o link e também mudo a cor de fundo Nós vamos conseguir esse efeito. Vamos voltar ao editor de código do estúdio do usuário. Como você pode ver, já criamos nome do documento HTML index dot TML dentro da nossa tag body, aqui digite A e ctTaghber Então eu já conecto um arquivo CSS com esse estilo de ponto CSS. E se eu entrar no arquivo CSS de estilo, como você pode ver, primeiro forneço a altura em nossa seção de corpo, depois usamos displayflakes e justificamos o centro de conteúdo e o Align In center para posicionar a tag âncora no meio desta página vertical e Align In center para posicionar a tag âncora no meio desta depois usamos displayflakes e justificamos o centro de conteúdo e o Align In center para posicionar a tag âncora no meio desta página vertical e horizontalmente. Agora, primeiro, vou adicionar um fundo cinza escuro, uma cor de fundo apertada. E eu vou usar um valor hexa com a tag Has tag 22, dois, e vou definir esse arquivo Depois de configurar esse arquivo, como você pode ver, desta vez ele mudou a cor de fundo cinza escuro. Em seguida, vou focar nessa tag âncora. Vou estilizar esse botão. Então você digita A, então dentro da primeira propriedade do clivus, eu vou usar takes decor, decoração de texto Precisa de decoração, vou usar objetos não pertencentes. Depois de remover o sublinhado do texto, vou atribuir uma cor a esse texto, cor, e quero atribuir a cor branca à branca Em seguida, vou atribuir família de fontes, família de fontes e quero atribuir família de fontes Sans Em seguida, vou atribuir o tamanho da fonte. Tamanho da fonte, quero atribuir um tamanho de fonte de quase 40 pixels, 40 pixels. Acho que é o suficiente para isso. Eu perturbei isso. É assim que parece. Agora vou adicionar uma borda, uma borda sólida. Tipo de propriedade de borda de tipo, e eu quero três pixels de borda sólida, sólida. Além disso, vou atribuir uma cor de borda à cor da borda, vou adicionar a cor branca, branca e vou definir esse arquivo Em seguida, vou adicionar preenchimento, preenchimento de algum tipo, De cima para baixo, vou atribuir 40 pixels e da esquerda para a direita, vou atribuir 80 pixels. E eu vou configurar esse arquivo. Eu configurei esse arquivo, é assim que ele se parece. Em seguida, vou usar a propriedade de transição. Transição para transição, vou atribuir transição para todas essas propriedades, ou seja, tudo, e então vou definir a duração da transição, que é de 0,3 segundo. Em seguida, vou definir a posição relativa. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Em seguida, quero mudar a cor de fundo ao passar o mouse sobre este link Eu quero torná-lo vermelho. Vou criar um seletor de foco, tag de âncora Então, dentro da classe, vou mudar algum tipo de cor de fundo, cor de fundo, e vou atribuir vermelho à cor vermelha Agora eu preceito esse arquivo. Estou aqui neste link, como você pode ver, agora a cor de fundo muda para a cor vermelha. E agora eu quero criar a linha branca grossa. E para isso, vou usar antes o pseudo elemento. Então, vou criar o pseudo elemento anterior. Primeiro, vou escolher a etiqueta ka, depois dois pontos, e vou empatar antes Então, dentro das cálices, primeiro, vou criar um conteúdo vazio, contendo dois pontos, e é um conteúdo vazio Então eu quero definir a cor de fundo para esse elemento. Cor de fundo, e eu quero atribuir a cor branca. Branco. Depois disso, vou definir a posição do pseudo-elemento Estou digitando a posição e desta vez, quero atribuir uma posição absoluta. Então eu quero colocar esse elemento naquele canto, no canto superior. Do topo, vou atribuir zero e, da esquerda, vou atribuir zero também. Então, precisamos definir a altura desse elemento. Para largura, vou atribuir 100%, 100% e para altura, deixe-me atribuir altura, vou atribuir 50 pixels e vou definir esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Este é o nosso pseudo-elemento anterior. E agora eu quero movê-lo para o lado esquerdo fora da área do link. Para isso, vamos usar, vou usar a propriedade transform, algum tipo transform transit X minus, quero traduzi-la em até -100% E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Eu movo isso antes do pseudo-elemento para fora desta área, para fora desta área de etiqueta de gato E agora eu quero girar esse elemento em 45 graus. Então, aqui, vou usar o valor de rotação, girar. E eu quero girá-lo até 45 graus, e eu vou subtrair esse arquivo. Depois de girá-la até 45 graus, é assim que nossa linha se parece Agora, se eu colocar meu carro nesse botão, quero mover essa linha para o lado direito para obter o efeito Além disso, precisamos atribuir a transição para o efeito de suavização. Vou usar essa transição de propriedade, então copio essa e vou colocá-la aqui Agora, vou fazer algumas alterações ao passar o mouse sobre o link no meu botão Eu quero mover o pseudo-elemento anterior. Para isso, precisamos criar uma tag de âncora seletora, mouse e usar o psudoelemento before, before Então, dentro do carro, diz: Ei, eu vou usar a propriedade transform, transform, translate. Traduza, e eu quero movê-lo para 100%, não menos, 100% positivo Além disso, durante o botment, quero girar os elementos, use a rotação 45 Agora, depois das septicinco, quando eu passo por cima, meus carros estão nesta fila, agora você pode ver esse elemento se mover para o E você também pode sentir a transição. Agora precisamos aumentar a área excedente, a área excedente fora da etiqueta Anca. Para isso, precisamos usar a propriedade overflow. Para resolver o problema, precisamos entrar no seletor de tags Anca e aqui precisamos usar uma propriedade chamada overflow, overflow hidden Depois de configurar este arquivo, agora você pode notar que o pseudo-elemento anterior não está visível, mas se eu abrir minha casa nele, você pode obter o belo efeito É assim que podemos construir esse projeto. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 6. Botão de escala do texto usando CSS: Olá, pessoal. Mais uma vez, estou de volta com um novo efeito Hover de botão relacionado ao projeto Nesta lição, vamos criar esse belo Haffet e usaremos a pseudoeleína anterior para criar esse efeito Hover Então, vamos entrar no editor de código do Studio e ver como podemos fazer isso. Então, como você pode ver, estamos no meu editor de código do Studio e, como você pode ver, já criamos um documento HTML chamado index dot HTML E na etiqueta corporal, Harry pega e corta a etiqueta, e HearTypeH eu. Então eu já crio um arquivo CSS de estilo e vinculo esse arquivo ao documento da tabela. Agora, vamos entrar na pilha de estilos CSS. Como você pode ver, como atribuímos a altura, esses playfiq justificam o alinhamento do centro de conteúdo ao centro Para tornar esse elemento âncora no centro desta página horizontal e verticalmente. Agora, vamos estilizar esse elemento. Vou selecionar esse elemento usando seu nome de tag A e , dentro dos aliases, a primeira propriedade que vou usar usa decoração Precisa de decoração, não vou usar nenhuma. Em seguida, vou usar outra propriedade chamada cor, cor e vou atribuir uma cor de texto. Vou usar algum tipo de cor cinza escuro para usar o Haztag 26, 26, 26 Em seguida, vou definir a família da fonte. Família de fontes, vou designar Sansai. Em seguida, vou definir o tamanho da fonte tamanho da fonte 40 pixels. Depois disso, vou definir borda, borda e vou atribuir uma borda sólida de três pixels. Sólido e nossa cor de borda é Hatag e vou usar a mesma cor que uso para a cor da fonte Em seguida, vou definir o preenchimento. Preenchendo de cima para baixo, vou definir 40 pixels da esquerda e da direita, vou definir 80 pixels Agora vou definir a transição. Transição, e eu quero aplicar a transição para Oop, e vou definir o tempo de transição de 0,5 segundo E também precisa definir a posição relativa. Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nosso botão se parece. E agora vou usar o pseudo elemento anterior para criar nosso efeito Então, aqui vou digitar. Primeiro, vou selecionar a anti tag, depois vou usar o seletor de procedimento BEFORE, before Então, primeiro na imprensa, vou adicionar conteúdo, conteúdo e vou digitar O M. Então, dentro de um único curso, vou digitar sobre mim. Depois disso, depois disso, vou definir a posição, posição absoluta. Em seguida, vou definir o ritmo em que vou colocar esse texto. Eu quero colocar esse conteúdo naquela esquina. Vou digitar do topo, vou passar zero e também da esquerda, vou passar zero ovos. Em seguida, vou definir altura e largura, altura, vou atribuir altura 100% e também largura 100%. Em seguida, vou adicionar cor de fundo a esse elemento, o elemento positivo. Vou digitar a cor de fundo e quero atribuir a mesma cor, essa cor cinza escuro. Em seguida, vou atribuir a cor da fonte, a cor e vou atribuir a cor branca porque precisamos torná-la branca visível. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Em nossos exemplos anteriores, maioria das vezes criamos um conteúdo vazio. Mas desta vez nesta teta, colocamos essa mensagem em cima de mim. E agora precisamos colocar esse texto no meio desse contêiner, vertical e horizontalmente Para isso, vou usar a propriedade flex, exibir flocos para justificar o conteúdo, justificar o centro de conteúdo e alinhar o item também ao centro, e vou Depois de definir esse arquivo, é assim que ele se parece. Agora eu quero aumentar o tempo de luta desse fundo cinza escuro. Eu quero fazer uma escala de ajuste a partir de seu tamanho horizontal e isso tornará o elemento de fundo muito grande Além disso, vamos tornar sua opacidade zero. Então, isso vai torná-lo transparente. E quando eu passo o mouse sobre esse link, eu quero escalar de novo. Eu quero fazer isso de novo. Com isso, também vou mudar a oposição. Eu vou fazer isso de novo. Eu quero torná-lo visível novamente. Então, vamos fazer isso. Primeiro, vou aplicar a escala, um pouco de t, transformar, e quero usar a escala de valor da habilidade, e quero fazê-la cinco vezes. Depois de configurar esse arquivo, é assim que ele se parece. Eu o faço muito maior do que o anterior. Ele dimensiona esses elementos de fundo cinco vezes maior que seu tamanho, mas eu quero que eles fiquem escondidos fora deste link. Aqui, dentro desse elemento âncora, vou usar a propriedade overflow, overflow, overflow Escondido, e eu vou configurar esse arquivo. Depois de salvá-lo, ficou assim. Agora você pode ver fora da área do link, o pseudo-elemento anterior está oculto Além disso, você precisa tornar esse elemento totalmente transparente. Dentro do seletor anterior, vou aplicar a propriedade de opacidade, opacidade e vou aplicar opacidade Se eu definir esse arquivo, é assim que ele se parece. Agora, o elemento de fundo dianteiro é totalmente transparente. Além disso, não é visível em nossa área de transbordamento. Agora eu quero aplicar a transição. Aqui, vou tentar a transição, e quero aplicar a transição a toda essa propriedade, e vou levar 0,5 segundo. Vou configurar esse arquivo. Em seguida, ao passar o mouse, quero transformar esse pseudo-elemento Quero reduzir a escala desse pseudo-elemento e também precisamos aumentar o valor da transparência Precisamos torná-lo visível. Vou digitar A, dois pontos Heber, dois pontos, e vou usar antes do seletor, vou direcionar o elemento de força antes disso, dentro da Classe. Quero aplicar a propriedade de transformação, a escala de transformação e quero torná-la Além disso, vou fazer Opa City Opacity, vou fazer dela uma vou fazer dela Quero torná-lo totalmente visível ao passar o mouse sobre ele e vou definir esse arquivo Agora, depois de definir esse arquivo, quando eu passo o mouse sobre essa tag âncora, alcançamos o resultado desejado Esse resultado. Espero que agora esteja claro para você, como podemos criar esse lindo botão va que Hova deixou Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. Te vejo em breve. 7. Botão de troca circular: Olá, pessoal. Mais uma vez, estou de volta com um novo botão relacionado ao projeto Herefit Nesta lição, vamos criar esse lindo botão Haefet. Como você pode ver quando eu passo o cursor, você pode experimentar esse efeito Quando eu passo o mouse sobre esse botão, um fundo vermelho preenche esse botão na parte superior Então, vamos começar a prática e ver como podemos criá-la. Então, como você pode ver lado a lado, abro meu editor de código ist studio e meu navegador usando a extensão light de servidor, e já crio um documento HTML chamado index dot HTML. Com isso, eu já crio esse arquivo CSS de pontos de estilo e vinculo esse arquivo CSS a este documento. Agora, dentro da tag body, primeiro, vou criar uma tag de botão. Então, aqui vou digitar botão de tag de botão e também vou atribuir uma classe de classe e o nome da nossa classe é botão T em formato abreviado. Em seguida, vou digitar o botão. Eu quero configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora precisamos colocar esse botão no meio desta página. Para isso, precisamos entrar no arquivo CSS de estilo. Primeiro, vou selecionar a tag body, body. Então, primeiro, dentro da coluna, vou atribuir margem a esta página, margem, e quero atribuir margem zero, depois vou atribuir essa propriedade baixa Os flocos de exibição Justificam o conteúdo, justificam o centro de conteúdo também alinham o centro dos itens para alinhar o centro dos itens . Em seguida, vou atribuir altura a essa altura de página e atribuir altura 100 H. Em seguida, vou atribuir FontOnFamily e quero atribuir a fonte Sensory, Sanserith, vou Depois de configurar esse arquivo, ficou assim que ele alinhou esse botão no meio desta página horizontal e verticalmente Em seguida, vou direcionar o botão usando o nome da classe. Para isso, vou digitar dot BTN. Então, dentro das cores, primeira propriedade, vou usar borda de borda e bainha para atribuir uma borda sólida de dois pixels, aquarela sólida é tomento Vou configurar esse arquivo. Depois disso, vou remover o plano de fundo. Histórico, e eu não vou atribuir nenhum. Em seguida, vou mudar a cor do texto. Estou digitando a cor e quero atribuir a cor ao ovo de tomate. Em seguida, vou colocar pouco de acolchoamento de cima para baixo e para a direita e levantar Estou digitando preenchimento de cima para baixo, vou atribuir 20 pixels e da esquerda e direita, vou atribuir 40 pixels Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Em seguida, vou definir o tamanho da fonte. Vou digitar fonte, tamanho da fonte. Aqui, vou atribuir o tamanho da fonte de 25 pixels. Depois disso, vou usar uma propriedade chamada transformação de texto, transformação de texto, transformação de texto em maiúsculas Em seguida, vou atribuir outra propriedade, que é cursor, ponteiro do cursor Sempre que eu mover meu cursor sobre esse botão, ele se tornará um ponteiro Depois disso, vou atribuir a transição de transição e quero aplicar a transição para toda essa propriedade e minha duração de transição é de 0,5 segundo. Então eu vou configurar esse arquivo. Em seguida, vou definir a posição, posição em que vou usar rely. Agora, vamos trabalhar no efeito flutuante. Usaremos o pseudo-elemento anterior para isso e conhecemos o processo Agora, vamos criar o pseudo elemento anterior. Então digite ponto BTN, botão, dois pontos, B quatro. Então, dentro da probidade do AlyssF, vou usar conteúdo, conteúdo e vou criar Em seguida, vou definir a posição desse conteúdo, posição, e vou usar valor absoluto, absoluto. Eu quero colocar esse elemento naquele canto. Do alto, vou atribuir zero e também da esquerda, vou atribuir zero. Quero iniciar o elemento pelo canto superior esquerdo. Então eu vou definir dentro da altura com 100%. Além disso, vou definir altura, altura, 100%. Em seguida, vou definir o plano de fundo, o plano de fundo e quero usar a cor tomate toma. Eu vou dizer isso. Eu configurei esse arquivo, é assim que ele se parece. Portanto, ele ocupa toda a largura e altura e fica em cima desse botão. É por isso que está na altura do nosso texto. Para resolver o problema, vou usar a propriedade do índice Z, o índice Z, e vou usar menos um para resolver o problema, mas nosso texto ainda não está visível porque texto e a cor do plano de fundo coincidem. Dentro do botão selecionado, se eu mudar a cor, cor. E se eu torná-lo branco e, em seguida, definir esse arquivo, é assim que ele se parece. Você pode ver que o texto agora aparece. Mas, por enquanto, vou fazer tomate novamente. Então, vou comentar essa linha e vou salvá-la novamente. E agora, para alcançar o resultado desejado, vou usar o raio da borda em nosso raio de borda do tipo pseudo lemate, zero, zero e 50% e 50% Do canto superior esquerdo e direito, eu uso o valor zero e para o canto inferior esquerdo e inferior direito, aqui eu uso 50% e 50% do raio da borda Agora, se eu definir esse arquivo, é assim que ele se parece. Agora temos as curvas em nosso plano de fundo e agora precisamos trabalhar no efeito de flutuação Agora vamos definir a altura desse fundo vermelho, zero. Em seguida, passando o mouse sobre o botão, aumentaremos a altura desse fundo vermelho Isso fornecerá os preenchimentos e a cobertura do efeito do botão Dentro desse fundo vermelho, vou definir altura, altura e vou torná-la zero. 0% em vez de 100%. Vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, ele desapareceu do fundo vermelho. Não é visível por causa de sua altura. Agora precisamos adicionar o efeito HVAD nesse elemento anterior. Para isso, vou digitar dot BTN Colon Hal colon e Então, dentro do carro, menos eu vou definir a altura, altura, 100% E eu vou configurar esse arquivo. Então, sempre que ouço meus carros neste botão, como você pode ver, ele aumenta a altura, mas aumenta a altura instantaneamente. Não há transição entre eles. Para isso, vou usar propriedade chamada transição no meu elemento Hard, transição no meu elemento posto. Então, Hemost faz a transição aqui , vou definir a transição em todo esse elemento e vou definir o tempo 0,5 segundo e vou definir esse arquivo Desta vez, depois de definir esse arquivo, se eu passar o mouse sobre minha cor neste botão, agora você pode ver o efeito de suavização Você pode experimentar isso. Mas o problema é que ele não cobre todo o botão por causa do raio da borda Então, para resolver o problema, precisamos aumentar a altura. Precisamos aumentar mais a altura em mais de 100%. Então, ao invés de usar 100%, aqui eu vou usar 190%, e eu vou configurar esse arquivo Depois de definir esse arquivo, se eu passar o cursor sobre esse botão, você pode ver que ele resolve o problema, mas cria um novo problema. Então você precisa caminhar pela área de transbordamento. Para isso, no meu botão. Nesta área de botões, vou usar a propriedade chamada transbordamento, aquecimento por transbordamento . Vou configurar Se eu definir esse arquivo e passar o cursor sobre esse elemento, você pode ver aqui que obtemos o efeito desejado Ele esconde o elemento de transbordamento. Agora, também, precisamos resolver outro problema. Precisamos mudar a cor quando eu passo o mouse sobre esse elemento. Precisamos mudar a cor do texto quando eu passo o mouse sobre esse botão Para isso, aqui vou criar outro seletor BTN e ela criar um seletor Dentro da cor ss, vou usar a propriedade chamada color. Cor branca. Eu quero configurar esse arquivo. Depois de definir esse arquivo, se minhas cartas estiverem nesse elemento, aqui você pode ver que alcançamos o resultado desejado. Espero que agora esteja claro para você como podemos criar esse lindo efeito de botão. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 8. Rotacionando o botão de três camadas: Olá, pessoal. Nesta lição, vamos criar esse lindo efeito de botão Hover Como você pode ver quando as cartas I Hoberm estão neste botão, aqui você pode experimentar um efeito de inversão No início, um fundo verde cobria o botão, depois um fundo vermelho cobria o botão e, quando eu solto o mouse, ele volta à posição original. Vamos ver como podemos criá-lo. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão Lifesaver e já crio um documento SML chamado index Com isso, eu já crio o arquivo CSS Dod do tile e vinculo esse arquivo CSS Tyled a esse documento HTML Agora, dentro da minha etiqueta corporal, primeiro, vou pegar uma etiqueta Gut, A. Aqui vou apenas dizer botão. E então eu vou configurar esse arquivo. Defina este arquivo, como você pode ver no meu navegador, esta é nossa tag âncora Agora, precisamos entrar nesse estilo ou arquivo CSS. Agora, primeiro, precisamos estilizar a tag corporal. Aqui, vou direcionar o corpo usando o nome da tag. Em seguida, vou atribuir margem em nossa tag corporal, que é zero. Depois disso, vou atribuir a propriedade display, display, e aqui vou usar o slick Em seguida, vou usar a propriedade de alinhar item, alinhar o centro do item, justificar o conteúdo e também Em seguida, vou atribuir altura à altura da nossa página 100 VH, altura do voto Depois disso, aqui, vou atribuir uma cor de fundo. Cor de fundo, e eu vou usar um hexavalu 212121. É uma cor cinza escuro. Se eu definir esse arquivo, é assim que ele se parece. Agora precisamos alterar o estilo da fonte desse texto. Para isso, vou usar a família de fontes, família de fontes e vou usar o Sansai Sansai. Vou definir esse arquivo Depois de configurar esse arquivo, ficou assim. Depois disso, vou estilizar essa tag âncora usando o nome da tag A. Então, dentro do Closs, primeiro vou atribuir preenchimento a esse botão, então digite preenchimento e, de cima para baixo, vou usar um paddy de 20 pixels e , da esquerda e direita, vou usar um paddy vou usar Depois disso, vou usar uma chamada de propriedade, leva decoração, decoração texto, leva decoração. Ele, eu não vou usar nenhum. Em seguida, vou usar outra propriedade chamada takes transform, text transform, takes transform, uppercase Em seguida, vou usar a propriedade de cor do fundo. Cor do plano de fundo, e aqui vou usar a cor de fundo, tag hass, se um, C quatro, zero F, essa cor amarela variante, e vou definir esse arquivo Depois de configurar esse arquivo, é assim que nosso botão se parece. Em seguida, quero alterar a cor do texto desse botão. Quero torná-lo branco, digitar Soon, colorir e quero torná-lo branco. Depois disso, vou definir o tamanho da fonte, o tamanho da fonte e vou aplicar à fonte t pixel. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece, mas eu quero algum espaçamento de letras entre esses caracteres Então, vou usar o espaçamento entre chamadas de propriedades. Vamos espaçar, eu quero um espaço de pixels entre os caracteres dessa palavra, sim, é bom Depois disso, vou definir a posição da e vou declará-la relativa Vou configurar esse arquivo. Em seguida, vou criar o fundo verde que cobrirá o botão. Para isso, vou usar antes do Posidoeleate. Aqui, vou amarrar dois pontos da etiqueta âncora antes. Então, primeiro dentro das calivas, dentro desse elemento anterior ao Posido, vou criar um conteúdo, conteúdo e vou digitar Depois disso, depois de criar o conteúdo, precisamos posicionar esse conteúdo, algum tipo de propriedade de posição, posição absoluta. Em seguida, vou colocar esse conteúdo naquele canto. Para isso, vou digitar do topo, vou atribuir zero e de P e de P, vou atribuir zero novamente. Em seguida, vou atribuir dentro da altura. Vou atribuir largura 100% e, em seguida, vou atribuir altura, altura 100%. Depois disso, vou definir a cor do plano de fundo. Cor de fundo, vou atribuir a mesma cor de fundo, então vou copiar e atribuir uma cor de fundo verde Vou usar um hexa Valu com etiqueta dois CE, sete, um. Essa cor de fundo verde, e eu vou definir esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora, o fundo verde está logo acima do fundo amarelo. Agora precisamos centralizar essas tomadas na horizontal e Para isso, vou usar a propriedade display flex, display e vou usar flex and align align items Também no centro, também no centro. Vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora, para criar o efeito, precisamos usar a função de rotação Vamos girar esse elemento verde ao longo do Xxs, então aqui, vou usar a propriedade chamada transformar e vou aplicar a rotação X aqui, vou passar o valor de 60 Agora, se eu definir esse arquivo, você pode notar que ele girará esse elemento verde no eixo horizontal Depois de definir esse arquivo, você pode ver o resultado e ele girou até 60 graus Como você sabe, por padrão, ele rotacionará o elemento a partir da linha central Mas eu quero mudar a posição desse ponto rotativo. Eu quero girar esse elemento a partir do topo. Para isso, precisamos usar uma propriedade chamada transform as transform Aisin animal pass top E altere esse arquivo, como você pode ver, agora ele gira o elemento a partir da posição superior Agora eu quero girar esse elemento em até 270 graus. Em vez de usar 60 graus, vou usar DEG de 270 graus e vou configurar esse arquivo , configurar esse arquivo como você pode ver e alterar esse arquivo, como você pode ver, é o elemento Agora não está mais visível. Como gira o elemento, ele fica atrás do botão Agora, quando eu passar o mouse sobre esse link, quero redefini-lo. Eu quero fazer com que seja zero novamente. Vou criar um seletor de foco usando a tag âncora que passa o mouse elem Então, dentro da Caria diz, como usar uma propriedade chamada transformar, transformar, girar X, e eu vou passar de zero grau zero Vou configurar esse arquivo. Sempre que as curvas do I Hoberm estiverem nesse elemento, esse botão, como você pode ver, ele girará esse pseudo-elemento verde esse botão, como você pode ver, ele girará esse pseudo-elemento verde em zero grau. Você não pode experimentar a rotação porque não usa nenhuma transição nela. Vou digitar transição de propriedade de transição. Além disso, vou definir a duração dessa transição de zero moeda em cinco segundos. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu passar meu Karza sobre ele, agora você pode experimentar essa transição Aqui você pode experimentar esse efeito de dormir. Agora, depois de criar o verde, quero criar o vermelho. Para isso, vou copiar esta seção, este antes do pseudo-elemento aqui eu vou colá-lo novamente. E em vez de usar o elemento antes do posto, desta vez, vou usar o elemento after posito, e desta vez vou usar a cor vermelha em vez de usar o vermelho verde Vou configurar esse arquivo. R Eu quero girá-lo depois do verde Para isso, precisamos usar algum atraso de transição. Experimente o atraso da transição, e eu quero atrasá-lo em até 0,25 segundo Isso é bom. Vou configurar esse arquivo. E da mesma forma, precisamos voltar ao Wi de zero grau neste botão. Para isso, aqui, vou criar outra Her selecionada para depois de Elemide A, dois pontos pairando, dois pontos e depois Hentyp. Então, dentro do recesso de Cali, vou aplicar esse mesmo valor e vou subtrair Depois de definir este arquivo, coloque o cursor do Wi Hoberm neste botão, aqui você pode experimentar esse lindo efeito de botão giratório Além disso, se você quiser obter um resultado diferente, sim, você pode alterar a posição de origem da transformação. Em vez de usar T, você aplica a parte inferior; se você aplicar o botão na parte inferior e depois esse arquivo, agora você pode desfrutar de um efeito de inversão diferente. Sempre que abro minha cor nela, é assim que ela cruza o botão. Por enquanto, vou usar o Top. Eu gosto de escolher o melhor para valorizar. É assim que se anima esse botão. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 9. 3 círculo para efeito de botão de fundo, parte 1: Olá, pessoal. Bem-vindo ao novo projeto. Nesta lição, vamos criar esse lindo e bonito efeito de botão Ha. Como você pode ver, quando eu passo o mouse sobre este link, três círculos se aproximam e uma capa dobrada, em seguida, um lindo fundo amarelo aparece e muda a cor do texto Vamos criar isso neste projeto. Vamos ver como podemos criar esse lindo efeito. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor Light, e já crio um nome de documento HTML com o nome do índice e ponto HTML. Com isso, eu já crio o arquivo CSS do Styler e vinculo esse arquivo a este documento usando tag de tinta Então, dentro da etiqueta corporal, primeiro, vou pegar uma etiqueta de âncora Vou pegar a etiqueta âncora usando A e, em seguida, vou pegar uma etiqueta de extensão, uma etiqueta de extensão vazia dentro da extensão da etiqueta de âncora, e dentro dessa etiqueta de ancha, vou virar sobre mim. Veremos mais tarde por que precisamos dessa tag span. Agora, vamos entrar no arquivo CSS de estilo. No começo, vou estilizar o tipo de corpo, então digite, corpo. Então, primeiro dentro do Cariss, vou dizer margem, vou dizer margem, zero de todas as direções Em seguida, precisamos alinhar o centro do gato desta página. Vou pegar essa propriedade, exibir flex, justificar conteúdo, justificar o centro de conteúdo Além disso, precisamos passar por alinhar o centro de Iams. Depois disso, precisamos definir a altura desta página, altura e eu vou definir a altura cem V g, altura do voto. Em seguida, vou definir a área da família de fontes da família de fontes. Depois disso, vou definir uma cor de fundo. Vou usar um tipo de cor de fundo escuro, cor de fundo, hashtag, vou usar um HixaVu Ele vai manter uma cor cinza escuro. Depois de configurar esse arquivo, é assim que nossa página se parece. Também alinhou o texto no meio desta página. Agora precisamos estilizar essa tag Anca. Vou segmentar a tag ancha usando seu nome de tag A, então dentro da primeira propriedade color sus vou usar maconha, e aqui vou deixar de lado 220 pixels Então eu vou atribuir altura, altura, 80 pixels. Em seguida, vou atribuir cores. Vou atribuir a cor da fonte, a cor, a ela atribuir a cor, tipo de tonalidade amarela tem etiqueta, F se zero Vai voltar da cor amarela, algo assim. Em seguida, vou definir a cor de fundo. Cor Bagund, vou torná-la transparente. Essa. Em seguida, vou definir o tamanho da fonte. Tamanho da fonte. Aqui eu vou usar o tamanho da fonte 26 pixels. Também vou remover esse sublinhado, então vou digitar decoração de texto, decoração de texto Eu vou fazer com que não seja nenhum. Isso removerá o sublinhado. Em seguida, vou converter esse texto em maiúsculas, então vou digitar texto, transformar, Vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. E agora precisamos sintetizar esse texto na horizontal Para isso, vou usar uma propriedade chamada alinhamento de texto, Align, alinhamento de texto centralizado Acima disso, também vou definir a linha, altura da linha, 80, altura da linha, 80 pixels Então, é Alinhar o texto no meio desse contêiner. Aqui definimos a largura 220 pixels e a altura 80 pixels. Finalmente, vou adicionar a transição. Transição, vou aplicar a transição para todo o elemento e vou definir a duração de 0,5 segundo. Depois disso, precisamos definir a posição. Posição, depois disso, precisamos definir a posição, posição relativa. E eu vou configurar esse arquivo. Depois de configurar esse arquivo. Agora, vamos criar esses círculos, que vêm do lado esquerdo e direito. Quem sou eu nesse link? Quem usará o pseudo elemento antes e depois para criá-lo Quero criar o primeiro elemento circular naquele local e quero criar o segundo elemento circular nesse local. Vou usar o elemento antes e depois do possudo juntos Então, digite A, cólon, antes. A, cólon depois. Então, dentro do Carrass, a primeira propriedade, eu vou criar o conteúdo Eu vou criar o conteúdo D. O conteúdo é um conteúdo em branco. Vou usar a célula de código duplo. Então, precisamos definir a posição desse conteúdo. Então, tome uma posição, eu vou fornecer o absoluto. Em seguida, precisamos colocar esses conteúdos. Do topo, vou colocá-lo 50% do topo, vou colocá-lo 50% e depois vou definir nós, e vou definir com 20 pixels. Além disso, vou definir altura, altura e também 20 pixels. Depois disso, vou definir a cor de fundo. Mas antes de definir a cor de fundo, vamos definir o raio da borda porque precisamos fazer com que ela circule Raio de borda de 50%. Em seguida, vou definir a cor de fundo. Cor de fundo, vou definir a cor amarela, a mesma cor, hass tag, do leaf, zero, e vou definir esse arquivo Agora, para definir esse arquivo, você pode ver os dois círculos. Um é o lado esquerdo e outro é o lado direito. É feito por before positoselector e é feito por ter Mas você pode notar nossos pontos não estão alinhados com o texto Aqui, nós o posicionamos entre os 50% melhores. Quer dizer, 50% da altura da etiqueta ca, que é 40 pixels. Mas, para corrigir isso, precisamos usar a propriedade de transformação. Transforme, e aqui eu vou usar translate Y com, translate translate Y, e aqui eu vou usar -50% Até configurar esse arquivo, como você pode ver, ele alinhou os pontos com o texto e, em seguida, vou aplicar a propriedade de transição Transição, transição, vou aplicar a transição a toda essa propriedade. Em seguida, vou definir a duração da transição, que é de 0,3 segundo. Então, antes de um círculo superior perfeitamente centralizado neste texto Agora você pode observar o pseudo-elemento anterior cobrindo a letra H e o pseudo-elemento per quase tocando a letra E porque não especificamos nenhuma posição horizontal dele Para resolver o problema, vou focar no pseudoelemento anterior, pudo tipo A, dois pontos Em seguida, dentro do recesso de chamadas, vou digitar o nome da propriedade no final da esquerda, zero e vou configurar esse arquivo Depois de definir esse arquivo, como você pode ver, ele resolverá o problema. Em seguida, vou mirar no elemento ara A, superior. Então, dentro do recesso de Cali, vou colocá-lo lado certo para a direita, zero. Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Em seguida, usando a propriedade box shadow, criaremos a sombra desses círculos e criaremos duas sombras desses dois círculos Então, vou criar uma sombra de caixa para os elementos anteriores, então vou digitar sombra de caixa, com exceção de quatro valores. O primeiro valor é para a distância horizontal entre a sombra e o elemento. Do lado direito, vou mover a sombra dos dez pixels. Eu quero mover essa sombra do lado esquerdo, então vou usar -100 pixels Em seguida, precisamos fornecer a distância vertical do elemento. A partir do elemento, quero fornecer distância vertical zero e o terceiro valor representa o desfoque dessa sombra Mas eu não quero nenhum valor desfocado, quero sombra curta, e o valor grande, precisamos passar a cor da sombra e, por enquanto, vou usar vermelho, caso contrário verde Então, depois de definir esse arquivo, como você pode ver, aqui você pode ver um novo círculo. É uma sombra desse pseudo-elemento anterior. Eu vou fazer a mesma coisa o pseudo-elemento after Vou criar a mesma sombra apenas para colocá-la no lado direito desse elemento. Então, vou copiar esse link e colá-lo aqui. Vou mudar o valor da direção horizontal. Depois de definir esse arquivo, você pode ver o resultado. Agora temos quatro círculos altos. Essa é a primeira parte deste tutorial. Na próxima parte deste tutorial, trabalharemos no Haarefect Obrigado por assistir a este vídeo Syuned. 10. 3 círculo para efeito de botão de fundo, parte 2: bom ver vocês, essa é a segunda parte deste tutorial e, em nossa parte anterior, já criamos a sombra desse elemento antes e depois do Posido Agora, vamos trabalhar no efeito Ha. Primeiro, vou criar Hor selected para os elementos anteriores da tag ti anchor, hover colon, F. Então, dentro do caliss aqui, vou chamar a propriedade Left, left 50% left Então, sempre que eu passar meus carros sobre esse elemento, como você pode ver, ele moverá esse círculo em 50% da largura desse elemento Além disso, ele move essa sombra com ela, mas eu não quero manter a distância da sombra 100% onde eu passo o mouse sobre ela Em vez de usar -100, eu quero movê-lo um pouco mais perto do elemento original Aqui vou digitar box shadow box shadow e vou definir a posição da sombra, que é de 30 pixels quando eu passar o mouse sobre ela Além disso, vou passar os mesmos valores e a mesma cor, então vou copiá-lo e colocá-lo aqui. Eu vou definir essa multa. Então, sempre que eu coloco meu cursor sobre ele, como você pode ver, agora, a sombra se aproximou desse elemento original. Além de fechar, ele cruzou o elemento e foi para o lado direito desse elemento original. Além disso, vou fazer a mesma coisa com o elemento After pudo Então, eu dupliquei esta seção e vou substituir o antes pelo Depois Em seguida, vou mudar esse lado. Eu vou fazer o Laboratório 2, certo? Também precisamos passar o valor negativo aqui porque vamos mover a sombra para o lado esquerdo desse círculo. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu vagar nele, você poderá ver o resultado Agora precisamos fazer uma coisa. Precisamos mover o pseudoelemento anterior e superior para a mesma posição O usuário pode ver apenas três pontos sobre ele. Precisamos alinhar o centro do círculo desse elemento e o elemento da categoria. Para isso, precisamos usar a propriedade transform aqui, transform, e desta vez vou usar translate X value, translate X, translate X, e aqui vou usar o valor -50% Vou configurar esse arquivo. E como dizemos traduzir Y acima aqui, precisamos definir o mesmo valor em nosso elemento em nosso V para psudoelemento Aqui, precisamos mencionar que precisamos permanecer em -50% na direção de YxS, então eu quero colar o Traduza Y -50% e, em seguida, precisamos fazer a mesma coisa para o pseudoelemento superior Eu copio essa linha e vou colá-la aqui. E eu vou mudar os valores. Vou fazer com que seja positivo, não negativo. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu espero que meus carros estejam nele , sim, ele está funcionando, mas ainda precisamos usar o valor negativo porque precisamos alinhá-lo usar o valor negativo porque precisamos ao centro Depois de configurar esse arquivo, quando espero que meus carros estejam nele novamente, agora você pode ver o resultado Agora você pode ver apenas três circuitos. positivo anterior e superior elemento positivo anterior e superior se sobrepõem um ao outro É por isso que você pode ver apenas um círculo aqui. Agora vou mudar a cor do círculo do sado. Vou usar a mesma cor, a mesma cor amarela para ele. Em vez de usar verde, vou usar essa cor amarela. Então, eu substituo verde por essa cor todas as vezes e vou salvá-la novamente. Depois que eu disse esse arquivo, é assim que ele se parece. E agora vamos trabalhar no fundo amarelo usando essa tag span. Como você sabe, quando criamos nossa tag ancha, aqui criamos uma tag span dentro dela e agora vamos usar essa tag span Vamos voltar ao arquivo CSS de estilo. Vou usar essa tag gasta para fins de segundo plano. Então, para criar o plano de fundo, vou segmentar essa tag span usando o nome da tag de nome. início, vou definir a posição de sua tag de extensão dentro do clivusus vou definir a posição de sua tag de extensão dentro do , que Então eu vou definir o lugar a partir do topo, vou colocar a semente zero. E da esquerda, vou colocar o set zero novamente. Então eu vou dizer dentro da altura, com 100%. E então eu vou definir altura, altura também 100%. Em seguida, vou definir a do fundo, a cor do plano de fundo, a cor do plano de fundo e vou usar a mesma cor de fundo, que é haTagff zero, essa cor amarela Em seguida, vou definir o raio da borda. Raio da borda, raio da borda, vou usar oito pixels Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nosso botão se parece. Agora você pode ver o fundo amarelo no topo do texto, e então vou usar a propriedade de transformação, transformar, e vou usar a escala de valor de escala, e vou dizer escala zero. Além disso, vou usar a transição de transição, e vou dizer transição para todas as propriedades e também vou dizer a duração da transição, que é de 0,3 segundo. Depois disso, vou criar o Hoberselector da tag span, e nossa tag span está dentro da nctag . Vou digitar primeiro, vou selecionar ncTeghver e depois selecionar a selecionar ncTeghver e depois selecionar o Hoberselector da tag span, e nossa tag span está dentro da nctag. Vou digitar primeiro, vou selecionar ncTeghver e depois selecionar a tag span, span. Dentro do caliss, vou dizer escala de valor de escala de transformação, e desta vez vou defini-la 1 e retardo de transformação, e então vou usar atraso de transição pequeno valor de atraso de transição Atraso de transição, e eu vou configurá-lo 0,4 segundo. Vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, por padrão, ele oculta o fundo amarelo. Mas sempre que tento mover meu carro sobre ele, agora você pode ver que, após 0,4 segundo de atraso, ele apareceu em segundo plano. Como você pode ver, depois de terminar esse círculo em movimento, o fundo aparece. Em seguida, vou mudar a cor do link quando eu vagar nele Para isso, vou digitar anchor hover e dentro das raças de cores, vou usar a cor fberty color, desta vez vou usar a cor cinza escuro, então vou digitar Em seguida, adicionarei um pequeno atraso de transição e usarei o valor de atraso de transição de envio . Vou copiar este e colar aqui. Então, se eu definir esse arquivo e passar o mouse sobre ele, você verá que nada está acontecendo Parece que está porque precisamos mover esse plano de fundo para trás do texto. Para isso, precisamos usar o valor do índice Z para digitar o índice Z, que é menos um, e eu vou definir esse arquivo Então, defina esse arquivo quando eu abro meus cartões estão nele, você pode ver o resultado. Agora, o texto vem na frente desse elemento de fundo. Mas o problema é que nossos três podres também aparecem na frente do texto. Precisamos usar o mesmo valor do índice zen duas horas antes e depois do seletor de pseudoelementos. Essa. Aqui, vou passar o mesmo valor do índice Z e definir esse arquivo. Quando eu falo sobre esse elemento, desta vez você pode ver Agora, nosso plano de fundo e elemento de três pontos também estão por trás do texto Em seguida, vou definir a opacidade de ambos os elementos como zero. Deixe-me mostrar a opacidade, vou defini-la como zero. Vou configurar esse arquivo. Defina este arquivo, como você pode ver, ele esconde todos os pseudo-elementos, mas eu quero reaparecê-lo quando eu passar o mouse sobre Para isso, precisamos definir a opacidade em nossa seleção de Heróis. Copie o valor opacidade e em nosso posidoherSelector anterior ao superior, vou usar vou Eu vou conseguir. Desta vez, vou fazer com que seja um Opacity. Vou configurar esse arquivo. Desta vez, eu o tornei totalmente opaco. Depois de definir este slide, se eu passar o mouse sobre minha Karza neste link, você pode ver esse lindo efeito Her É assim que podemos criar esse lindo efeito Her. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 11. Novo efeito de passar o botão: Olá, pessoal. Bem-vindo à nova lição deste curso de animação. Neste tutorial, vamos criar esse lindo e bonito botão Haifat Se você olhar este botão, você pode notar que temos um total de dois planos de fundo aqui. Fundo de baixa cor e fundo de cor violeta. Nosso fundo de Eula foi enviado para o canto superior lapidado e nosso fundo de cor violeta foi enviado para o E quando eu passo o mouse sobre ele, você pode observar o fundo A e girar em três perspectivas D na dicção Xxs Então, vamos ver como podemos criar esse lindo Hoaiff. Então, como você pode ver lado a lado, abro meu editor de código do Wiser Studio e meu navegador usando a extensão de servidor ao vivo, e já crio um documento SML chamado index dot HTML Com isso, eu crio esse tile dot Css five. Agora, primeiro dentro da tag body, vou criar a gravata âncora usando A, depois vou amarrar o botão Efeito Button Hover. Vou configurar esse arquivo. Depois disso, precisamos entrar no arquivo CSS stylar. Primeiro, vou selecionar o corpo da tag body. Então, dentro da primeira propriedade da calibração, vou usar margem, margem zero de toda a direção Então eu vou usar o display. Display e eu devemos usar display flex e alinhar o item, alinhar Além disso, vou digitar justify content, também centralizar. Em seguida, vou atribuir altura a esta página, altura, e vou atribuir altura 100 V H, altura da janela de visualização Em seguida, vou atribuir família de fontes, fonte, família e vou atribuir Al. Isso é bom. Vou configurar esse arquivo. Depois de definir este arquivo, como você pode ver, aqui você pode vê-lo alinhar o botão, no meio desta página na horizontal Agora vou estilizar esse link. Para isso, precisamos selecioná-la usando a etiqueta âncora A e dentro dos fígados está a primeira propriedade que vou usar E a primeira propriedade com a qual vou usar, e vou atribuir 300 pixels de largura. Em seguida, vou atribuir altura, altura e vou atribuir 60 pixels de altura. Depois disso, vou atribuir decoração de texto, decoração de texto e quero remover o sublinhado, então aqui vou usar nenhum Em seguida, vou transformar esse texto em maiúsculas, transformar texto, vou usar a propriedade de transformação de texto e vou usar propriedade de transformação de texto e fazer em maiúsculas Depois disso, também vou remover o plano de fundo. Vou torná-lo transparente. Cor de fundo transparente. Em seguida, vou atribuir o centro de alinhamento de texto ao alinhamento de texto. Em seguida, vou atribuir a altura da linha, a altura da linha. Aqui vou atribuir a altura da linha, quase 60 pixels. Acho que 60 pixels são bons para cada um. Em seguida, vou atribuir a espessura da fonte. Preciso de uma fonte e espessura de fonte um pouco mais ousadas e vou passar por um herdeiro ousado. Ousado. Depois disso, vou adicionar espaçamento entre letras, espaçamento entre letras e ela para adicionar espaçamento entre letras Em seguida, vou adicionar posição, posição relativa, quanto menor a propriedade, vou usar a transição. Transição e ela para atribuir a transição a toda essa propriedade, também vou definir a duração, que é de 0,2 segundos. Vou configurar esse arquivo. Depois de configurar esse arquivo, essa é a aparência do nosso botão. Agora, vamos criar os dois planos de fundo desse botão. Para isso, vou usar o elemento pósito dianteiro e posterior Primeiro, vou criar o elemento before posito, Cctag colon Em seguida, você define os carlivorss. Primeiro, vou criar um conteúdo em branco. Aqui vou digitar conteúdo, conteúdo e vou criar um conteúdo em branco, então passo dois núcleos. Depois disso, vou posicionar o conteúdo e vou fazer com que seja uma posição absoluta. Então eu vou colocar esse conteúdo naquele canto daquele lugar. Do topo, vou passar o valor zero e, a partir do final, também vou passar da posição zero, zero. Depois disso, vou atribuir largura e altura. Nós, eu vou atribuir 100%, e depois vou atribuir altura, altura também 100%. Em seguida, vou atribuir a cor de fundo, a cor e gostaria de usar a cor amarela. Vou configurar esse arquivo. configurar esse arquivo, é assim que ele se parece. Agora você pode ver nosso fundo amarelo ficar inteiro dentro da altura desse elemento, o elemento catag Agora, precisamos exibir esse texto. Para isso, vamos usar o índice Z. Então, para digitar o índice Z, vou torná-lo menos um Quero mover essa cor de fundo amarela para trás do texto. Então, o sb desse arquivo, é assim que ele se parecia. E agora vou mudar esse fundo amarelo, algo para a direita e para cima. Para isso, vou usar o valor menos três pixels, também o valor esquerdo menos três Vou definir esse arquivo depois de definir esse arquivo, como você pode ver, ele se move um pouco. Agora, vamos criar outro plano de fundo. Vou duplicar esta seção e aqui vou passar depois Em vez de usar antes, vou passar por um TR. Desta vez, quero movê-lo para o lado direito. Em vez de usar menos três pixels, vou usar três pixels Além disso, vou mudar a cor, a cor do fundo, e vou torná-la azul. Vou usar esse , azul violeta. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Agora você pode observar o fundo azul violeta sobre o fundo amarelo. Mas eu quero misturar o pano de fundo um com o outro. Para isso, podemos fazer isso facilmente. Precisamos usar uma propriedade chamada mix brain mode. Aqui está o modo mix de tipos Blain, e eu vou aplicar multiplicação, multiplicação e vou definir esse arquivo Precisamos aplicar o mesmo modo de mistura mista, multiplicar após o subelemento E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora, em vez de uma cor azul feia, quero mudar a cor da fonte Vou fazer com que seja branco. Então, em nossa etiqueta âncora, vou usar a propriedade color e vou torná-la branca E eu vou configurar esse arquivo. Então você pode ver dois fundos misturados um com o outro e isso cria um belo efeito agradável Em seguida, vamos trabalhar no efeito de flutuação. Agora, no efeito de flutuação, quero girar o elemento na direção Xxs em três ambientes D. Para fazer isso, primeiro, vou selecionar o elemento hover select, anchor hover e, em seguida, antes Então, dentro das rodadas, dentro das calibragens, primeiro, vou mover o fundo amarelo para os seis pixels superiores Vou usar o primeiro valor máximo e vou torná-lo menos seis pixels Então, do laboratório, vou fazer com que seja zero. E então eu vou usar a propriedade transform, transform, e vamos usar três valores D. E, como você sabe, vamos usar três ambientes D, então precisamos aplicar a perspectiva sobre ele. Perspectiva. Aqui eu vou definir a perspectiva de 1.000 pixels, não 100, vou fazer com que seja de 1.000. E então eu vou aplicar rotação x, rotação X, e aqui vou definir, mas antes de ligar a torre af, Wrap and Hem para definir o ângulo, que é 75 graus. Eu vou definir esses cinco. E para uma transição suave, vou aplicar a propriedade de transição no elemento anterior. Então digite a transição e eu vou definir o tempo para a transição que é de 0,2 segundo. Vou configurar esse arquivo como satisfatório. Se eu abrir meu cursor sobre ele, você poderá notar a transição. Você pode notar que nosso fundo amarelo gira no ambiente de CD na direção XXs. Precisamos fazer a mesma coisa com o pseudoelemento superior, mas na direção oposta Mas você pode notar que esse não é o resultado que queremos. Quero girar esse elemento a partir da posição superior, não da posição central Então, precisamos mudar a origem. Transforme a origem, bem, deixe-me mostrar a você. Então, em nosso elemento positivo de castor, Imotype transforma a origem, e eu quero girar o elemento da posição superior para cima Vou configurar esse arquivo. Se meus carros estão neste elemento, agora você pode ver, agora você pode notar que desta vez ele gira o elemento amarelo da posição superior em três ambientes D. Agora eu preciso fazer a mesma coisa o fundo de cor violeta, mas antes vou cortar esta seção e colá-la antes do seletor de procedimentos Vou duplicar esta seção e colá-la após o elemento after procedure Só vou mudar de antes para depois. Também para comprar a posição. Em vez de usar heromon de seis pixels para usar menos seis pixels e em vez de girar 75 graus Heim para usar -75 graus e também usar as mesmas propriedades, como transição e origem de transformação em Eu copio isso para propriedade e valor e HerraOptich. E eu vou mudar a posição de origem da transferência. Em vez de usar top, vou usar bottom do bottom e vou definir esse arquivo. Depois de configurar esse arquivo, se eu permanentemente esse botão, você poderá ver o resultado Aqui você pode ver o belo efeito, mas o problema é que depois de Hober, como você pode ver, nossa cor de texto branca combina com a cor de fundo Precisamos resolver o problema quando eu passo o mouse sobre ele, precisamos alterar a cor do texto dessa tag de âncora aqui, vou criar um Hbaselector de âncora a Her precisamos alterar a cor do texto dessa tag de âncora aqui, vou criar um Hbaselector de âncora a Her de âncora no final , vou usar a propriedade color e vou aplicar a tag hass 272727 e vou Vou configurar esse arquivo. Depois de definir este arquivo, se eu passar o cursor sobre ele, você poderá apreciar esse lindo efeito Her você poderá apreciar esse lindo efeito Her Espero que agora esteja claro para você como podemos criar esse lindo efeito de botão Hover Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 12. Efeito de botão dividido: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo botão relacionado ao projeto, efeito Hova, hoje vamos criar esse lindo botão Haefet Como você pode ver, quando eu passo o mouse, meus carros estão sobre este elemento, quatro pequenos botões COD de quatro lados diferentes, do lado esquerdo do topo, do fundo e do lado direito Isso é o que vamos construir hoje neste projeto. Vamos começar a prática e ver como podemos construí-la. Então, como você pode ver lado a lado, abro meu iter de código do Visual Studio e meu navegador usando a extensão de servidor ao vivo, e meu navegador usando a extensão de servidor ao vivo, já crio um nome de documento HTML com o nome de um documento HTML, índice, ponto de índice Além disso, eu crio um arquivo css de pontos de estilo e vinculo esse arquivo a este documento. Então, dentro dessa etiqueta corporal, primeiro, vou pegar a etiqueta âncora Dentro da tag body, vou digitar A para tag âncora, e dentro da tag âncora, vou pegar uma tag span, span Então, dentro da tag Span, vou digitar sobre mim. Aqui, adicionamos essa tag pan porque queremos criar quatro partes do plano de fundo. Isso cobrirá o botão, e então eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o botão no meu navegador. Agora, os dois primeiros elementos que vamos criar usando o elemento psudo antes e depois Em seguida, usaremos essa tag pan para criar outras duas. Vamos entrar no arquivo CSS de pontos de estilo. No começo, vou estilizar o body tag board. Então, dentro da Cali, a primeira propriedade vou usar a margem e vou definir a margem Z. Depois disso, precisamos colocar essa tag âncora no meio desta página Vou usar Huber, vou usar a propriedade, essa peça, e vou torná-la flexível Depois disso, vou usar outra propriedade chamada alinhar item, alinhar o centro do item, justificar o conteúdo, justificar o conteúdo também centralizado Em seguida, vou definir altura, altura e vou usar a altura 100 da altura da janela de visualização Depois disso, vou definir a família da fonte. Família de fontes, e eu vou usar fonte aérea. Em seguida, vou definir uma cor de fundo. Vou usar uma cor de fundo escura, algum tipo de cor de fundo , hashtag, 222 Ele retornará a cor de fundo cinza escuro. E depois desse arquivo, é assim que parece. Em seguida, vou direcionar a tag âncora usando o nome da tag A. Em seguida, dentro da primeira propriedade color recess, vou usar decoração de texto, decoração texto e quero remover o sublinhado, então vou usar a NunVlu. Depois disso, vou colocá-lo em maiúsculas Vou vincular transformação de texto, texto, transformação. Eu quero colocá-lo em maiúsculas. Então eu quero definir o tamanho da fonte, o tamanho da fonte, e vou torná-la de 25 pixels. Depois disso, vou definir uma cor. Vou definir a cor dessa fonte, algum tipo de cor, e quero usar esse código de cores, hass tag, F six, B, 93b, essa cor amarelada, e vou definir Em seguida, vou fornecer espaçamento entre letras entre esses caracteres Então digite, letras, espaçamento e Heundpass Depois disso, vou definir um pouco de preenchimento. Eu preciso de um pouco de acolchoamento. Mas antes de definir o preenchimento, vamos adicionar a borda Borda por borda, eu quero uma borda sólida de três pixels. Borda sólida de três pixels, e nossa cor de borda é igual à cor da fonte. Eu copio o código de cores e vou colocá-lo aqui. Depois disso, vou adicionar preenchimento. Preenchendo de cima para baixo, quero definir 25 pixels e, da esquerda e da direita, vou definir 50 pixels e vou definir esse arquivo Depois de definir esse arquivo, é assim que nosso botão se parece. Em seguida, adicionarei a transição porque precisamos de algum efeito de suavização Vou digitar a transição. Quero aplicar toda essa propriedade e, em seguida, vou definir a duração de 1,5 segundo. Depois disso, vou definir a posição, a posição, vou definir relativo e vou definir esse arquivo. Eu configurei esse arquivo, eu vou configurar esse arquivo. Agora vamos trabalhar na parte frontal de um fundo amarelo Quando passarmos o mouse sobre esse link, ele cobrirá esse link Vamos criar o primeiro elemento de fundo usando a tag âncora Vamos usar antes um elemento ator para isso. Agora vou criar o pseudo-elemento antes e depois juntos Então, Ti, A, dois pontos, porta B. Em seguida, vírgula superior, Hemótipo A, cólon depois. Então, dentro dos calibrs a primeira propriedade que vou usar, vou criar um conteúdo em branco Conteúdo, dois pontos são um conteúdo em branco. É um conteúdo em branco. Depois disso, vou definir a posição. Posição, vou torná-la absoluta. Então eu vou definir. Nós, eu vou definir 25%. Em seguida, vou definir a altura. Altura, vou definir altura 100%. Depois disso, vou definir a cor do plano de fundo. Cor de fundo, vou usar a mesma cor de fundo que uso para a cor do texto. Em seguida, vou definir o índice Z para que o texto seja visível. Precisamos mover o plano de fundo para trás do texto. Então, vou digitar o índice Z, o índice Z e vou usar menos um valor Em seguida, vou usar a transição e vou definir a transição para todo esse elemento. Além disso, vou definir o tempo de transição, que é de 0,5 segundo. Agora, para configurar esse arquivo, é assim que nossos elementos se parecem. Lembre-se de que aqui usamos 25% da largura desse elemento e cortamos a etiqueta porque, se somarmos quatro elementos , ele cobrirá toda a área. É por isso que eu uso 25% para cada um dos elementos. Agora precisamos mover isso antes do elemento posito. Primeiro, vou mirar no elemento anterior do Posido sozinho antes Então, dentro dos calibres, vou usar a melhor propriedade, E aqui vou definir a posição a partir do topo, vou atribuir valor zero. Então eu vou definir a posição esquerda, P e aqui eu vou passar -25%. E eu vou subtrair esse arquivo Depois de definir esse arquivo, é assim que ele se parecia agora. Então essa é a posição inicial do elemento anterior para esse kata E agora vou mudar a posição disso após o pseudo-elemento Vou colocar esse elemento nessa posição. Para isso, vou duplicar esta seção e, em vez de usar antes, vou usar depois A partir do topo, eu vou passar -100% Então, da esquerda, vou usar 20% positivos. Se eu definir esse arquivo, é aqui que queremos colocar esse elemento. Então, quando eu passo o cursor sobre esse botão, eu quero mover o elemento antes para o lado direito e eu quero mover o elemento depois para o lado inferior E vai completar os 50% da área. Agora, vamos falar sobre o efeito Hard. Primeiro, vou criar um Hoefect para o elemento anterior tipo A , com dois pontos Dois pontos, vou digitar o nome do elemento antes. Então, no clirass da primeira propriedade, vou usar o valor superior, superior, do topo, quero colocar zero quando eu tiver Hvar nela Eu quero colocar a posição e, a partir da tarde e do laboratório, também vou torná-la zero. Depois desse arquivo, quando eu colocar minha cor nele, ele moverá esse elemento para dentro dessa caixa Do topo, ele vai fazer zero e do laboratório também vai fazer zero. É por isso que ele o coloca dentro desse elemento. Em seguida, precisamos trabalhar no efeito de foco do elemento superior. Precisamos mover o elemento para baixo. Do topo, precisamos posicioná-lo em zero e, do laboratório, precisamos movê-lo em 25%. 25% da área da borda da etiqueta nc. Vou criar o seletor de foco dele, algum tipo A, dois pontos, hora Em seguida, dois pontos, vou selecionar o elemento ator. Depois. Então, dentro da classe, do topo, vou colocar zero e, a partir do final, vou colocar 25%. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar o cursor sobre esse elemento, é assim que ele se parece Foi assim que cobriu 50% da área desse botão. Então, estamos quase terminando nosso trabalho central. Na próxima parte deste tutorial, criaremos as outras duas partes usando a tag span e antes do elemento positivo, e abordaremos as outras duas partes. Obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 13. Efeito de botão dividido, parte 2: Olá, pessoal. É bom ver você de volta. Esta é a segunda parte deste projeto, como você pode ver, já criamos dois elementos usando o seletor de posição anterior e superior do elemento raiva Nosso elemento anterior se move para o lado direito e nosso elemento superior se move para baixo E agora precisamos criar as duas partes restantes. Novamente, vamos criar esses dois elementos usando o pseudoelemento antes e depois Mas desta vez vamos usar o elemento psudo antes e depois dessa tag span, que você cria dentro dessa tag nga, essa Vamos dizer que o estilista diz que caiu novamente. Vamos criar esses dois elementos. Vamos entrar nesta seção e aqui para adicionar extensão cólon antes da extensão cólon depois E eu vou configurar esse arquivo. Perturbe esse arquivo, é assim que ele se parece. Então, criamos com sucesso esses dois elementos. Agora precisamos colocar os dois elementos. Para isso, primeiro, vou selecionar o intervalo antes do elemento, e aqui vou criar um seletor dele. Espalhe antes. Então, diz o escultor, aqui temos como alvo a etiqueta de extensão antes do elemento, que está dentro do elemento âncora Então, digite A, espaço, extensão, dois pontos antes. Em seguida, precisamos definir a posição do topo, 100% superior. Ele colocará esse elemento abaixo do botão e, em seguida, precisamos definir a posição correta. Então, dê a dica certa, 25%. Vou configurar esse arquivo. Depois de definir esse arquivo, é aqui que colocamos esse elemento. Do lado direito, foi enviado para 25% e, do topo , para 100% Da mesma forma, precisamos colocar o pseudo-elemento after Eu dupliquei esta seção e, desta vez, vou focar no elemento aer Então, nas cariras da direita, vou fazer -25%, e do topo, vou dizer zero Vou configurar esse arquivo. aqui que colocamos esse elemento posterior. Em seguida, precisamos trabalhar no seletor Hover. Deixe-me te mostrar. Primeiro, vou trabalhar no seletor Hover do elemento Before Vou digitar, ancorar, pontuar, passar o mouse e, em seguida, precisamos selecionar a tag Span span before element, span , dois-pontos Então, dentro das cálices, ao passar o mouse sobre esse elemento, quero mover esse elemento para o lado superior, aqui vou digitar do valor superior zero E também quero dizer que é valor certo, o valor certo, o valor certo. E para o dique, vou usá-lo 25% do jeito que está, 25%. E eu vou configurar esse arquivo. Ao definir este arquivo, se eu pular com o cursor sobre ele, você poderá ver o resultado. Foi assim que ele moveu esse elemento para cima. Agora precisamos trabalhar nesse elemento, o elemento per psudo dessa tag pan Então eu copio esta seção e colo aqui. E desta vez, eu seleciono o elemento depois, depois. Então, aqui, precisamos definir a posição. Aqui só precisamos fazer com que o valor correto seja zero, e precisamos definir esse arquivo. Depois de definir esse arquivo, se eu passar o cursor sobre ele, você poderá ver o resultado É assim que ele completa o plano de fundo com os quatro elementos diferentes. Em seguida, precisamos mudar a cor do texto quando eu passar o mouse sobre ele Vou criar um seletor Her da etiqueta âncora, A, dois pontos Então, dentro do processo do carro, vou usar a cor da propriedade e vou atribuir essa cor cinza escuro , mas com etiqueta a duas. Vou configurar esse arquivo. Depois de configurar este arquivo, quando eu coloco meu carro neste botão, você pode ver o resultado E nosso último dever é esconder a área de transbordamento fora da área de tecnologia da Anca Para isso, precisamos entrar no imposto Anca selecionado este, então aqui precisamos usar a propriedade chamada overflow Estouro oculto. Vou configurar esse arquivo. Um conjunto deste arquivo. Esse é o tamanho e a aparência. Se eu passar meu carro sobre esse elemento, você pode ver o lindo efeito O. Espero que agora esteja claro para você como podemos criar esse lindo botão Heft Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 14. Efeito de mudança do botão de borda - Parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial sobre nosso projeto E hoje, neste tutorial, vamos criar esse lindo efeito de botão Então, se eu ouvir meus carros nele, você pode experimentar essa transição. Você pode ver que nosso botão tem quatro bordas longas ao redor dele. Além disso, você pode notar que eles não têm mesma altura e largura de acordo com o botão. É um pouco mais longo do que isso. Você pode notar que as bordas esquerda e direita têm maior altura e os boerhb superior e inferior Aprenderemos como fazer isso e como fazer essa transição. Então, vamos entrar no editor de código do Visual Studio. Como você pode ver lado a lado, abro meu editor de código do estúdio de resultados e meu navegador usando a extensão if server, e já criei um documento HTML chamado index dot TML Com isso, eu já crio esse arquivo CSS de mosaico e vinculo esse arquivo a este documento. Então, primeiro, dentro da tag body, vou adicionar uma tag âncora, A, e um hover do tipo hemo Eu. Em seguida, vou entrar no arquivo CSS de estilo e, primeiro, vou estilizar a tag body, body. Então, na primeira propriedade da Califórnia, vou usar Marji, vou dizer margem zero de toda a direção Então eu vou dizer display. Display, vou fazer com que seja flix porque quero colocar a etiqueta ancha no meio da fala e alinhar o heterótipo dos Além disso, vou digitar, justificar o conteúdo, justificar o conteúdo e também centralizar Em seguida, vou usar outra propriedade chamada altura, altura e vou atribuir altura 100 VH com altura visualizada. Em seguida, vou atribuir uma cor de fundo. Eu quero atribuir uma cor de fundo escura, então tipo herm, cor de fundo, hastag 222, esse código de cor, cor cinza E agora vou direcionar a tag âncora usando seu tagnym A, e dentro dos aliases, a primeira propriedade vou usar decoração de texto, texto, decoração . Primeiro, vou remover o sublinhado, então não vou Então eu vou converter esses textos em maiúsculas fuligem, texto, transformar maiúsculas Depois disso, vou definir o tamanho da fonte tamanho da fonte 22 pixels. Acho que fazer dois pixels é ótimo para isso, e vou definir esse limite. Em seguida, vou mudar a família de fontes, quero usar a fonte aérea Aéreo. Depois disso, vou definir o espaçamento entre as letras, a lacuna entre os caracteres, espaçamento entre as letras e vou torná-lo em três pixels Além disso, vou definir a cor. Cor, vou torná-la amarela, caso contrário, cor branca. Acho que a cor branca é boa para isso, branca. Depois disso, vou definir altura e largura, altura, altura e quero atribuir 60 pixels de altura. Então eu vou definir com. Nós. Também para maconha, vou usar 200 pixels. Acho que é bom para isso. Em seguida, vou definir a altura da linha, altura da linha e ela atribuir a altura da linha, 60 pixels. Além disso, precisamos alinhar o centro do texto desta página, então digite o texto alinhar o texto Vou configurar esse arquivo. Agora precisamos definir borda, borda, e eu quero usar borda sólida de dois pixels, sólido, nossa cor de borda é, por enquanto, vou usar a cor azul, acho que. Acho que azul é bom. Azul. Em seguida, vou definir a posição, a posição relativa e vou definir esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Agora precisamos trabalhar na borda longa que vimos no escuro para descobrir como criá-las, precisamos trabalhar passo a passo. Em primeiro lugar, para criar as bordas esquerda e direita, usarei o pseudo elemento anterior Vamos criar o pseudoelemento antes dessa tag Anca, A, dois pontos E primeiro dentro das calibragens, vou criar o conteúdo em branco Conteúdo, dois pontos, é um espaço em branco, e eu vou fazer nesta linha Depois disso, vou definir a posição. A posição é absoluta. Em seguida, vou definir a largura e a altura. Altura, vou fazer com que seja de 60 pixels, depois vou definir com o Wi que vou fazer com que seja de 200 pixels. Eu vou definir a primeira posição, topo. Do topo, vou colocá-lo zero e, da esquerda, vou colocá-lo em zero também. Agora você pode observar aqui que atribuímos a mesma altura e peso, que atribuímos em nossa etiqueta de ancoragem Até agora, o pseudo-elemento anterior tinha o tamanho exato desse elemento de codificação. Tem altura e largura semelhantes. Se eu definir esse arquivo, ele ficará em cima dele. Agora vou criar a borda esquerda e direita com ela. Deixe-me mostrar um tipo de borda esquerda, e eu quero uma garrafa de dois pixels , então uma borda sólida também é sólida Então nossa cor de borda é : vou atribuir a cor vermelha. Vermelho. Em seguida, vou criar a borda direita. Borda, direita e hemo passam dois pixels, borda sólida, sólida, e nossa cor de borda é Também quero usar a mesma cor de borda que uso para o texto Eu vou voar desta vez. Agora, se eu definir esse arquivo, é assim que ele se parece. É uma borda branca e aqui você pode ver a borda vermelha, e ela está na borda azul original. É por isso que você mal consegue vê-los. Agora eu quero fazer essas duas bordas um pouco mais longas. Vou aumentar a altura dessas duas bordas. Vou aumentar a altura anterior do pseudo-elemento. Eu vou fazer 90, e vou colocar essa pilha Agora você pode ver que parece um pouco mais longo. Agora, as bordas são 30 pixels maiores do que nossa altura de anctag, porque aqui atribuímos 90 pixels. E agora precisamos alinhar essa borda no meio desse conteúdo Quero dividir igualmente a borda na parte superior e inferior. Para isso, aqui, vou usar apenas o valor máximo. Vou fazer com que seja menos fif ping. Então, ele vai dividir a borda na parte superior e inferior. Então eu vou configurar esse arquivo, você pode ver o resultado. Então, essa é a primeira parte deste tutorial. Na próxima parte deste tutorial, criaremos as bordas superior e inferior. Então, obrigado por assistir a este vídeo. Fique ligado na nossa próxima parte. 15. Efeito de mudança do botão de borda - Parte 2: É bom ver vocês. Esta é a segunda parte deste tutorial e aqui na seção, vamos criar a borda superior e inferior. Vamos entrar no estilo CSS spie. Aqui, vou criar o pseudoelemento superior A na taxa superior Então, primeiro, dentro do Caris, vou criar um conteúdo em branco, conter e estender o conteúdo, depois vou definir a posição Posição, eu vou passar por absoluto. Então eu vou definir altura, altura. Aqui eu vou atribuir altura de 60 pixels. Em seguida, vou definir, com, e vou ascender com 230 pixels, e depois vou posicioná-lo Do topo, por enquanto, do topo, eu vou fazer com que eu passe zero e da esquerda, eu também vou passar de zero. Em seguida, vou atribuir uma borda. Limitado. Primeiro, vou atribuir borda superior, borda superior e, na parte superior, vou atribuir dois pixels, borda sólida, e nossa cor de borda é peso. Em seguida, vou definir outra borda para a borda inferior inferior. Borda inferior, borda sólida de dois pixels e nossa cor de borda é branca. Vou submeter esse arquivo Depois de definir esse arquivo, ficou assim. Agora você pode ver que temos a borda superior e inferior, e ela é um pouco maior que a largura desse botão. Como você pode ver, o Hero está configurado com 200 pixels, mas para a borda, usamos 230 pixels e agora precisamos enviar a borda para o lado esquerdo, um pouco. Precisamos alinhá-lo ao centro. Precisamos alinhá-lo verticalmente. Para isso, em vez de zero, ela passa menos 15 pixels px. Vou satisfazer esse arquivo, é assim que ficou. E agora não precisamos mais dessa borda azul. Eu vou esconder essa fronteira. Vou comentar essa linha e configurar esse arquivo. Estão configurados este arquivo, é assim que ele se parecia. E agora precisamos trabalhar no efeito de foco. Lembre-se, quando eu passo o mouse sobre essa linha, eu quero mudar a borda de seus rostos Quero moldar o vermelho superior para baixo e o vermelho esquerdo para o lado direito, e isso pode ser feito com muita facilidade. Então, vamos trabalhar no pseudo-elemento flutuante. Vamos criar o seletor Her do elemento positivo diferido Então, amarre, A, dois pontos, passe o mouse e depois dois pontos, eu vou amarrar Então, na calibração , vou usar a transformação de Pooper e vou passar o valor de rotação Y, girar Y. Então, eu quero girar esse elemento em 180 graus, 180 DG, vou Vou girar o pseudoelemento anterior em Y Xs 180 graus. Se eu passar o cursor sobre ele, instantaneamente, você poderá ver o resultado Basicamente, isso ativará o YxSDer para que aconteça sem problemas Precisamos entrar no pseudo-elemento anterior e aqui Tipo sumô, transição completa e nosso tempo é de 1 segundo. Obviamente, esse arquivo quando eu passo o mouse sobre este link. Como você pode ver, foi assim que mudou a posição. Basicamente, ele inverte o elemento. Agora você pode ver a borda mudar a posição exatamente que queremos. Agora precisamos inverter o elemento after. Para isso, vou duplicar esta seção e, em vez de usar antes, vou selecionar depois Então, dentro do Cls aqui, vou usar o valor de rotação x. Em vez de usar girar Y, vou usar girar x e vou definir esse arquivo Depois de configurar esse arquivo, se eu passar por cima do meu carro neste botão, você poderá ver o resultado. Mas também precisamos adicionar transição nesse pseudo-elemento superior Eu copio esse valor e propriedade, o mesmo valor e propriedade, e vou colá-los aqui. Agora, se eu definir esse arquivo e quem quer que sejam meus carros neste link, aqui você pode ver o lindo efeito de transição Mas se você quiser torná-lo mais atraente, você pode adicionar um pequeno atraso de transição no pseudoelemento superior, algum tipo de transição B, e eu quero durar até 0,2, caso contrário, 0,2 segundo Se eu definir esse arquivo e os carros Herm estiverem nele, agora você pode notar que depois de eu mover para a esquerda e para a direita, ele se moveu para cima e para baixo, e isso cria um belo efeito Então, espero que agora esteja claro para você como podemos criar esse lindo efeito Hover Então, obrigado por assistir a esta estátua em vídeo para nosso próximo estúdio. 16. Efeito de botão criativo para crescimento de borda: Olá, pessoal. Bem-vindo à nova lição deste curso. Nesta lição, vamos criar outro botão interessante, o HaiFtT Como você pode ver, esse botão tem uma borda no canto superior esquerdo e no canto inferior direito E quando eu coloco o cursor Huberm, ele aumenta a altura e a largura da borda e fica sobre este lindo botão Então, vamos ver como podemos construir. Como você pode ver, lado a lado, abro meu editor de código salt Studio e meu navegador usando extensão de servidor Live e já criei um documento HTML com o nome index dot html Com isso, eu também vinculo arquivo CSS de estilo e é um arquivo vazio. Agora, no primeiro ponto de índice StimlPage vou criar um botão Aqui vou digitar o botão, e dentro desse botão, vou digitar enviar. Eu vou definir o arquivo. Depois de Definir arquivo, é assim que ele se parece. Em seguida, vou pular para o meu arquivo CSS. Estilo ou CSS. No início, vou segmentar a tag body, body usando o nome da tag. Então, dentro dos aliases, primeiro, vou dizer margem e vou dizer margem zero, e vou dizer margem zero, depois vou definir a altura, altura e vou definir 100 H para altura Em seguida, vou definir a exibição. Nesta peça, vou usar o display flex. Depois disso, vou alinhar esse item, alinhar o centro do item, justificar o conteúdo, justificar o conteúdo e também centralizar Em seguida, vou definir a cor do plano de fundo. Cor de fundo aqui eu vou usar a hashtag 27, 2727. Vou configurar esse arquivo. Até configurar este arquivo, como você pode ver, essa é a cor de fundo cinza escuro. Além disso, alinhamos esse botão no meio desta página horizontal e verticalmente. Em seguida, vou estilizar essa etiqueta de botão, botão de tipo de música, botão dentro dos carros Primeiro, vou definir a borda. Border, eu não vou definir nada. Em seguida, vou definir o preenchimento de preenchimento. De cima para baixo, vou atribuir 12 pixels, e da esquerda para a direita, vou atribuir 40 pixels. Depois disso, vou definir a cor do plano de fundo. Cor do plano de fundo. Para a cor de fundo, vou pesquisar a cor da onda. A cor da onda e o leme abrem qualquer site. Então, dessa cor da web, vou escolher uma das cores. Então, eu gostaria de usar essa cor de salmão claro. Então eu copio o valor hexa dessa cor e vou colá-lo aqui Vou configurar esse arquivo. Em seguida, volte ao documento. Depois disso, vou definir a família da fonte. Família de fontes, vou usar qualquer fonte que você possa usar aérea Em seguida, vou definir o tamanho da fonte. Tamanho da fonte, vou usar o tamanho da fonte de 22 pixels. Em seguida, vou converter esse texto em maiúsculas, texto , transformar maiúsculas Além disso, vou fazer nosso cursor apontar quando eu pular meu cursor neste botão. Então, para digitar o cursor, vou torná-lo apontado. Também vou posicioná-lo. Posição, vou tornar a posição relativa. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Além disso, vou atribuir uma pequena fonte a essa fonte. Eu preciso de uma fonte um pouco mais ousada aqui, vou atribuir 700 e vou salvá-la novamente. Com isso, vou mudar a cor do texto, cor do smotype e vou torná-la branca Vou configurar esse arquivo. Nós estilizamos esse botão com sucesso. Agora vamos criar as fronteiras. Primeiro, vamos criar a borda no canto superior esquerdo usando o pseudo-elemento before, depois vamos criar a borda no canto inferior direito usando o elemento after psudo Para criá-lo, basicamente, precisamos criar uma pequena caixa. Deixe-me te mostrar como. Aqui, vou digitar botão, dois pontos, antes do elemento. Antes. Então, dentro das cores, a primeira propriedade, vou usar conteúdo, conteúdo, e aqui eu digito, vou criar um conteúdo vazio. Depois disso, vou definir a posição. Posição, vou torná-la absoluta. Então eu vou definir wd. Largura, vou fazer com que seja de 24 pixels. Além disso, vou definir a altura. Altura, vou defini-la como 24 pixels. Em seguida, posicionar a caixa quadrada naquele canto do laptop. Do topo, vou posicioná-lo zero e, no lado esquerdo, vou posicioná-lo em zero novamente. Além disso, vou definir uma cor de fundo, cor fundo e, por enquanto, vou definir a cor vermelha, VERMELHA, que possamos entender a caixa quadrada com muita facilidade. Predefina esse arquivo, é assim que ele se parece. Agora, se você se lembra, nossa fronteira está fora da área. Lá fora, eu quero dizer fora da área dos botões. Vou enviar para a caixa quadrada, à esquerda e um pouco por cima Então, vou enviá-lo menos cinco pixels, digitar menos cinco pixels, cinco pixels do laboratório Além disso, vou usar o mesmo valor para o topo. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Agora, depois de enviá-lo a cinco pixels da parte superior e da esquerda, ele sai da área do botão. Agora, vamos adicionar a borda superior e esquerda. Então, aqui, vou usar primeiro, vou usar borda superior, algum tipo de borda, superior. Quero usar dois pixels, borda sólida, e nossa cor inferior é exatamente a mesma cor que usamos para o botão. Copie o valor da cor e eu vou colá-lo aqui. Então eu vou duplicar essa linha. Desta vez, vou criar a borda no lado esquerdo, com a garrafa atrasada. Eu uso a mesma borda e vou definir esse arquivo. Defina este arquivo, você pode ver a borda. No lado superior e no outro está o lado esquerdo. Em seguida, precisamos animar essa borda. Eu quero crescer quando coloco o mouse sobre meus carros neste botão. Podemos fazer isso com muita facilidade. Precisamos aumentar a altura e a largura dessa caixa quadrada. Vamos criar o seletor de hober desse botão no botão de texto, dois pontos, orifício, dois pontos, Então, dentro do civuss, vou definir altura e altura de 100% Além disso, vou definir largura, largura 100%. E eu vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar o mouse sobre ele, você poderá ver o resultado Mas precisamos adicionar uma pequena transição quando eu passo mouse sobre ela, porque instantaneamente ela aumentou a altura e a largura dessa barra Aqui eu vou usar a propriedade de transição. Faça a transição de tudo. Com isso, também vou definir o tempo para essa transição que é de 0,25 segundo Eu acho que é o suficiente. Vou configurar esse arquivo. Depois de definir este arquivo, se eu esperar que meus carros estejam nele, você poderá ver o resultado. Depois de adicionar a transição, depois de definir esse arquivo, se eu espero que meus carros estejam nele, você poderá experimentar essa transformação. Agora, precisamos remover esse fundo vermelho. Precisamos apenas da fronteira. Para isso, vou comentar esta linha e vou configurar esse arquivo. Se eu definir esse arquivo, você poderá ver o resultado. Agora precisamos fazer a mesma coisa para o canto direito da borda. Para isso, vamos usar o elemento Posido. Vou copiar esta seção e colá-la depois do seletor Her Então eu vou primeiro, eu vou mudar antes depois. Depois disso, vou mudar a posição. Primeiro, vou mudar de cima para baixo e depois vou mudar da esquerda para a direita. Depois disso, também precisamos mudar a borda superior para a borda inferior e a borda, da esquerda para a borda, direita. Vou configurar esse arquivo e aqui você pode ver o resultado. E da mesma forma, precisamos criar o cursor selecionado para esse elemento posterior Eu copio esta seção novamente e vou colá-la aqui, e aqui vou substituir as quatro por depois. Vou configurar esse arquivo. Agora, depois de definir esse arquivo, se eu barrar que minhas cartas estão nesse elemento, alcançamos o resultado desejado. Harry conseguiu esse lindo efeito de botão Hover. Espero que agora esteja claro para você como podemos criá-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 17. Efeito criativo de botão rotativo de primeira letra: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo botão relacionado ao projeto Haift. Neste projeto, vamos criar esse lindo botão Como você pode ver, quando os cartões I Hoberm estão neste botão, você pode notar que o fundo gira um pouco Além disso, aumentou o tamanho dessa primeira letra, B, e também girou a letra B em 360 graus Vamos ver como podemos criar esse lindo botão Hari fit Vamos entrar no código do estúdio. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão de servidor ativo e já crio um documento SML chamado index dot HTML Com isso, vinculo este arquivo CSS do modelador de documentos. Vamos começar a adicionar uma tag Anca e dentro da ncatag vou pegar uma tag span e dentro da tag span, vou digitar a letra B maiúscula para que possamos animar essa letra que possamos animar essa Então, fora da tag span, vou digitar o resto da palavra. Botão. Em seguida, vou recarregar meu navegador Agora precisamos alinhar esse botão no meio desta página horizontal e verticalmente. Para isso, precisamos entrar no arquivo CSS de pontos de estilo. Primeiro, vou focar na etiqueta do corpo, primeiro no corpo do cali vis, vou definir a altura e vou definir a altura 100 da altura da janela de visualização Em seguida, vou exibir a tela. Vou fazer com que ela se solte. O aplicativo que vou aplicar, justifique conter centralizado. Em seguida, vou digitar itens de alinhamento também centralizados. Além disso, vou definir a família de fontes, e vou usar a fonte aérea, aérea E, finalmente, vou esconder a área de transbordamento. Estouro oculto. Então eu vou usar a cor de fundo. Para cor de fundo, vou digitar Hashtag 22, esse fundo cinza escuro Vou configurar esse arquivo. Em seguida, vou estilizar essa captura algum tipo A e, dentro da propriedade carissF, vou usar decoração de texto Decoração de texto, vou fazer com que não seja porque quero remover o sublinhado Depois disso, vou definir molhado. O que, ele colocou uma erva daninha, 160 pixels. Então eu vou atribuir a altura. Altura por altura, vou atribuir 60 pixels. E vou definir a cor colorida e quero atribuir a cor branca ao texto. Depois disso, vou definir a fronteira. Borda, e eu quero usar, e eu quero usar borda de cor sólida de dois pixels, borda sólida de cor sólida de dois pixels, sólida, e nossa cor de borda é branca, Hastag se for A. Vou submeter este arquivo . configurar esse arquivo, é assim que ele se parece. Em seguida, vou alinhar o texto no meio desse contêiner Então, para digitar o alinhamento do texto, alinhe o texto ao centro. Depois disso, vou definir a altura da linha, a altura da linha e quero atribuir a altura da linha, quase 60 weixel. Acho que 60 pixels são bons Depois disso, vou definir o tamanho da fonte e o tamanho da fonte e vou torná-la 25 pixels. E eu vou submeter esse arquivo. Depois de submeter este arquivo, é assim que orbita e se parece. Em seguida, vou tornar a posição relativa e também vou adicionar a transição. Transição, todo esse elemento e nosso tempo de transição são zero ponto, algo em dois segundos. Acho que é bom para isso. Vou submeter esse arquivo Agora vamos criar o fundo branco. Quando você passa o mouse sobre este link, ele gira esse fundo e usaremos o psudoelement anterior para usaremos o psudoelement anterior Aqui vou digitar ancha tag antes do psudoelement. Antes de entrar, o calibre diz, primeiro, vou criar um conteúdo em branco Conteúdo e eu quero criar um conteúdo em branco. Depois disso, quero posicioná-lo, posicioná-lo, quero torná-lo absoluto. Além disso, você precisa colocá-lo de cima, eu vou passar de zero e, a partir do final, também vou passar de zero. Em seguida, vou definir com a altura desse elemento. Vou usar 100% e altura. Como eu vou usar 100% por cento. Em seguida, vou definir a cor de fundo. Cor de fundo, e eu quero usar a cor branca, esse código de cores. Eu vou satisfazer. Depois de satisfazer, como você pode ver, ele cobriu todo o botão e, para que o texto apareça acima dele, precisamos usar o índice Z. Índice Z menos um menos um, e eu vou satisfazer. Agora, ele deve estar invisível e, quando eu passar o mouse sobre esse link, ele deve aparecer e desaparecer . Também girou. Vou dizer opacidade zero e vou fazer uma transição de transição, e vou definir t 0,8 Em seguida, vou criar um seletor de foco desse elemento diferente Então, aqui, eu vou empatar. Então, aqui vou amarrar uma etiqueta, dois pontos, Hal. Seletor de overs. Então, vou focar no elemento anterior. Então, no interior, o calibre diz: Aqui, quando eu passo o mouse sobre ele, eu quero definir a opacidade Vou tornar a opacidade uma. Eu quero torná-lo totalmente opaco, não transparente. E então eu vou aplicar a propriedade de transformação, transformar e eu quero girar esse elemento Em breve, para digitar, rotacione. Transforme a rotação e eu quero girá-la, quero girar esse DEG de 15 graus . Vou configurar Depois de configurar esse arquivo, ao passar por cima meu cursul, você pode notar primeiro que ele tornará o fundo branco, o fundo transparente opaco e, em seguida, girará o elemento Em seguida, ele girará o elemento de fundo em 15 graus Agora, depois disso, quero mudar a cor do texto ao passar por cima deste link. Eu quero deixar esse texto em preto. Para isso, vou criar um seletor de foco, aqui vou digitar Anca tag hover digitar Anca tag Então, dentro das cores, primeira propriedade, vou usar cores. Cor, vou torná-lo branco e vou configurar esse arquivo. Depois de definir este arquivo, se eu carregar o cursor, desculpe, precisamos torná-lo preto porque já usamos a cor branca do texto Vou fazer com que tenha uma etiqueta para fazer esse código de cores. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar o cursor sobre ele, você poderá ver o resultado Agora vamos nos concentrar na primeira letra B. Se você se lembra, quando eu passei o cursor sobre esse botão, ele aumentou o tamanho da primeira letra e, como você pode ver, Harry colocou a letra B dentro da etiqueta de extensão Vou ter como alvo essa tag de extensão. Aqui, vou digitar A, dentro dessa tag A, tag âncora, vou direcionar a tag span, span Então, dentro do fígado, primeira propriedade, vou usar cor, cor e vou torná-la transparente Em seguida, vou fornecer a posição e quero torná-la relativa. Agora você pode ver que a primeira letra agora está invisível porque dissemos que a cor era transparente. É por isso que é invisível. Em seguida, vou criar o pseudo-elemento anterior da tag span Aqui estou do tipo A, span, a span, o pseudo elemento anterior Então, dentro da Classe, eu vou criar conteúdo, conteúdo e colocar a letra B. Então eu vou posicioná-la na posição, vou torná-la absoluta. Em seguida, vou fornecer cor, cor e quero colorir essa cor cinza escuro. Desculpe, eu uso a cor branca, branca. E então precisamos usar a propriedade de transição. Transição. E aqui, eu vou fazer a transição. E também precisa definir o tempo de transição, que é de 0,2 segundo. Vou configurar esse arquivo. Agora, vamos trabalhar no efeito rígido dessa etiqueta de caneta, Sandfoelement, algum tipo de etiqueta âncora, Hal, span, colon, BFO Então, primeiro dentro da resina de cor, vou mudar a cor quando eu a colocar. Então digite a cor, eu vou torná-la de cor escura 222. Então eu quero aumentar o tamanho da fonte, algum tamanho de fonte do tipo, e vou torná-la de 80 pixels. Finalmente, precisamos girar, digitar, transformar, girar, e eu quero girá-lo 360 graus D EG, e vou configurar esse arquivo Então, defina este arquivo se eu passar o mouse sobre o cursor neste botão, como você pode ver, a primeira letra B gira 360 graus Mas o problema é que encobriu as outras letras. Preciso movê-lo um pouco que não esconda as outras letras. Com isso, vou usar translate propriety, some type, translate Vou enviar para menos 65% dos XXs e menos 10% dos YxS Depois de definir esse arquivo, se eu colocar meu cursor neste botão, você poderá experimentar esse lindo efeito de passar o mouse sobre o botão Agora é enviado para o XXS -65% e é enviado para o YXS -10% É por isso que cria esse lindo efeito, mas que efeito. Espero que agora esteja claro para você como podemos construí-lo. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 18. Efeito inferior de quatro bordas crescentes: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo projeto. Hoje, neste projeto, vamos criar esse lindo efeito de botão flutuante Como você pode ver quando eu pulo meus carros neste botão, quatro bordas diferentes cobriam esse botão. Vamos ver como podemos licitar. Como você pode ver lado a lado, abro meu editor de código do Studio de usuário e meu navegador usando o FSERetension, e já crio um documento SML nomear Com isso, eu já crio o arquivo CSS Stylod e vinculo esse arquivo CSS Styload a esse documento Agora, primeiro, dentro da tag body vou criar uma tag de botão. Botão. Além disso, vou pegar uma tag span, span, e vou definir esse arquivo. Depois de definir esse arquivo, ficou assim. Agora, precisamos entrar no arquivo CSS stylo. Vamos entrar nesse arquivo CSS stylo e começar a estilizar. Primeiro, vou selecionar body tag, body. Então, dentro da tag body, a primeira propriedade, vou usar a margem. Margem, vou atribuir zero. Em seguida, vou atribuir a exibição. Display, vou flexioná-lo. Em seguida, vou atribuir o item de alinhamento, alinhar os itens centralizados Também moti justify content center. Em seguida, vou atribuir altura, altura 100 VH à altura da janela de visualização Em seguida, vou atribuir família de fontes, área de família de fontes. Em seguida, vou atribuir a cor de fundo, subtipo de cor de fundo Para isso, vou usar a cor cinza escuro, hass tag 222, e vou definir esse arquivo Depois de definir esse arquivo, você pode ver o resultado. Agora você pode notar que ele alinhou o botão no meio desta página horizontal e verticalmente Agora vamos mirar no botão. Em seguida, vou selecionar o botão. Então, para amarrar o botão dentro da cor, resista. Dentro da resistência de cores, a primeira propriedade em que vou usar a cor de fundo, cor de fundo, vou dizer cor de fundo vermelha. Na próxima propriedade, vou usar border, Border, e vou remover toda a borda dela, então vou usar Nan Velu Depois disso, vou posicioná-lo. Posição, vou torná-la relativa. Então eu vou definir a altura de Wieden. Para maconha, aqui vou usar 400 pixels e para a altura, vou usar 120 pixels. Em seguida, vou converter essas tomadas, o texto do botão em maiúsculas O tipo leva, transforma, recebe transformação, em maiúsculas. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, precisamos aumentar o tamanho da fonte. Vou fazer com que o tamanho da fonte seja o tamanho da fonte e vou fazer com que seja de 45 pixels. E vou salvá-lo novamente para ordenar o texto dentro do botão vertical e horizontalmente, vou usar a Altura da linha, 120 pixels. Também vou digitar o centro da linha de texto. Em seguida, vou adicionar cor a essa cor e cor especiais, vou torná-la branca. Com isso, vou adicionar espaçamento entre letras. Espaçamento entre letras, vou adicionar 15 pixels e vou definir esse arquivo Depois de definir esse arquivo, é assim que nosso botão se parece. Agora, vamos criar a borda superior, que vem no lado direito esquerdo Para isso, vou usar antes os pseudo-elementos. Vou digitar botão de botão, dois pontos, e aqui vou digitar antes Depois, nas maldições, primeiro, vou criar um conteúdo em branco Conteúdo, é um conteúdo em branco. Depois disso, precisamos posicioná-lo, posicioná-lo, e eu vou torná-lo absoluto. Em seguida, vou definir onde vou colocar. De cima, por enquanto, vou colocar zero da esquerda por enquanto, vou colocar zero também. Em seguida, vou definir a largura. Largura, vou usar 100 pessoas. Depois disso, vou definir a altura. Altura, mas para altura, vou usar quatro pixels, quatro pixels. E também vou definir a cor do fundo, a cor do plano de fundo e vou torná-la branca. Vou submeter esse arquivo. Depois de definir esse arquivo, é assim que nossa borda se parece. Basicamente, não é uma fronteira, é um elemento profundo. Agora vou mover esse elemento, antes que o pseudo elemento fique de lado Deixe-me te mostrar como. Aqui, em vez de usar o valor b zero, vou usar -100% Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Agora, a linha foi enviada para o lado esquerdo. Em seguida, adicionarei transição, transição total e adicionarei zero ponto e 0,5 segundo. Vou configurar esse arquivo. Agora, quando ouvimos falar desse botão, quero voltar a borda para sua posição original. Então, para digitar, botão, passe dois pontos, dois pontos, antes do elemento, antes Então eu quero mover esse elemento ep para o lado direito, algum tipo, valor esquerdo, zero voltará à sua posição original. Depois de definir esse arquivo, se eu pular o cursor sobre esse botão, você poderá ver o resultado. Da mesma forma, quero criar a borda inferior. Vou localizar toda a seção e, em vez de usar antes, vou usar Então eu vou mudar a posição. Em vez de usar top, aqui vou digitar bottom. Além disso, vou mover esse elemento para o lado direito. Aqui eu vou passar para a direita -100% e vou definir este Além disso, precisamos fazer algumas alterações no seletor superior em vez de usar antes, vou usar depois em vez de usar o valor do led, vou usar o correto Vou configurar esse arquivo. Eu defino este arquivo, se eu segurar meu Custer nele, você pode ver o resultado Agora, da mesma forma, vou criar as bordas do lado esquerdo e do lado direito. Para isso, novamente, vou selecionar esta seção , copiá-la e colá-la aqui. Desta vez, em vez de usar o botão, vou usar span. Da mesma forma, vou criar o conteúdo vazio apenas para mudar a posição e depois a altura. Desta vez, vou usar quatro pixels por semana quatro pixels e altura de 100%. Então eu vou mudar o valor máximo. Em vez de usar zero, vou usar -100% E então eu vou mudar o valor da esquerda para a direita, da esquerda para a direita. Vou tornar esse valor zero e vou definir esse arquivo. Depois de definir esse arquivo, é aqui que colocamos esse elemento. Agora você pode ver que está acima do botão, a linha acima do botão. Além disso, você pode notar. Além disso, você pode notar que ele toca no lado direito desse botão porque usamos a posição correta zero. Agora, quando você passa o mouse sobre esse botão, quero voltar à posição original Eu quero dizer que, de cima para baixo, eu quero fazer com que seja zero. Então, vou criar o seletor Her desse botão, para amarrar o botão, passar dois pontos, para amarrar o botão, passar dois pontos, espaço, extensão, Então, dentro do Carlss e depois dentro do recesso do carro, vou usar o melhor valor, vou fazer zero Do topo, quero colocá-lo na posição zero. Vou configurar esse arquivo. Depois de configurar esse arquivo, aqui você pode ver o resultado. Quando abro meu carro nesse elemento, você pode notar o resultado, como o pseudo-elemento anterior está do lado direito para baixo em seu próprio lugar Agora, da mesma forma, precisamos criar o outro elemento para o lado esquerdo. Vou duplicar esta seção, a seção inteira, e em vez de usar antes, vou usar depois Para criar a borda final, em vez de usar 100% superior, vou criar a parte inferior. Parte inferior, 100%. -100%, em vez de usar a direita, vou usar a esquerda e vou definir esse arquivo Depois de configurar esse arquivo, aqui vocês veem o resultado. É assim que o criamos. Agora, precisamos movê-lo para cima quando minhas cartas estiverem nele. Para isso, em vez de usar antes, quero usar o elemento after com o Hover Effect Em vez de usar a parte superior, vou usar a parte inferior. Vou configurar o arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Se eu abrir meu cursor neste botão, você poderá ver todas as bordas chegarem ao seu lugar original quando você passar o mouse sobre elas A última coisa que precisamos fazer esconder a área de transbordamento Precisamos esconder essas fronteiras , então precisamos usar overflow hidden Dentro da cabeça do botão, vou usar a perversão excessiva Transbordamento oculto. Além disso, vou tornar o plano de fundo transparente. E eu vou configurar esse arquivo. Agora, depois de definir este arquivo, se eu pular no meu cortador neste botão, você poderá ver o resultado É assim que podemos mover e estender todas as bordas dos quatro lados diferentes e criar um lindo efeito de botão Hover Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 19. Dois efeitos de botão de corte: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo efeito de foco do botão CSS do Project Tate. E hoje, neste projeto, vamos criar essa linda animação de passar o mouse com botões de corte Aqui você pode ver duas cartas na parte superior e na inferior E quando eu passo o mouse sobre ele, como você pode ver, ele é coberto com a cor de fundo preto Além disso, mudou com a cor do texto. Então, vamos ver como podemos criar esse lindo efeito de passar o mouse sobre o botão Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão de servidor ativo e já crio um documento HTML chamado index dot HTML Com isso, eu já crio um arquivo de estilo namestyle dot CSS Eu vinculo esse arquivo a este documento. Então, dentro dessa etiqueta corporal. No início, dentro da minha etiqueta corporal, vou pegar uma etiqueta de âncora Então, dentro dessa etiqueta âncora, vou pegar uma etiqueta de extensão Abra e entre o botão do tipo hemo da minha etiqueta âncora. Não é a etiqueta inferior, apenas o botão. Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Agora precisamos entrar no arquivo CSS de estilo e, primeiro, precisamos alinhar esse botão no meio desta página Além disso, vou mudar a cor do plano de fundo. Aqui, primeiro, vou estilizar o corpo da seção do corpo. Então, na primeira probidade da calibragem , vou usar a Vou atribuir a altura de 100 à altura da janela de visualização. Então eu vou atribuir essa probabilidade. Exiba flocos. Justifique o conteúdo, justifique o centro de contenção. Também alinhe o centro de itens. Então eu vou dizer família de fontes. Família de fontes, vou usar a fonte Aerial. Depois disso, vou me esconder no transbordamento. Transbordamento oculto. Vou configurar esse arquivo. R: Para definir esse arquivo, como você pode ver, nós os alinhamos com sucesso, mas no meio desta página Em seguida, vou estilizar a etiqueta âncora. R, então dentro das calibrações, a primeira propriedade eu vou usar a decoração de texto Decoração de texto, quero remover o sublinhado, então não quero dizer nada Isso eu vou definir com 160 pixels. Então eu vou definir a altura, altura de apenas 60 pixels. Em seguida, vou usar cores. Cor e aqui, eu vou definir a cor preta. Depois disso, vou dizer altura da linha. Linha, altura, vou definir 60 pixels. Em seguida, vou alinhar o centro do texto desse tipo de botão alinhar o texto Depois disso, vou fazer com que seja capitalizado. O texto capitaliza alguma dica de transformação de texto, transformação texto, vou fazer com que seja maiúscula Em seguida, vou definir o tamanho da fonte. Tamanho da fonte, vou torná-la de 25 pixels. Depois disso, vou definir a posição dela, a posição, vou torná-la relativa e, para a suavidade, vou usar a propriedade de transição Transição, todo o elemento e nosso tempo de transição é de 0,2 segundo. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Em seguida, vou direcionar a tag span que está dentro da tag âncora, subtipo A, Então, dentro dos vasos do carro vou definir a posição Posição, vou torná-la absoluta. Depois disso, vou definir a largura da largura em 100%. Então eu vou definir altura, altura também 100%. Depois disso, vou definir a posição. Quero colocá-lo no canto superior esquerdo, algum tipo de valor máximo, vou passar zero. Por ultimamente, eu também vou passar de zero. Em seguida, vou definir uma cor de fundo. Cor de fundo. Por enquanto, vou usar a cor vermelha. Acho que, por exemplo , vou definir a fronteira. Borda, e eu quero usar dois pixels, dois pixels, e nossa borda é borda sólida sólida Borda sólida. Sólido, e nossa cor de borda é preta. Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Basicamente, eu não quero esse fundo vermelho, eu só quero a borda, então vou comentar sobre esse leão, não preciso dele. Vou configurar esse arquivo. Em seguida, precisamos criar os recortes que existem na borda superior e inferior, e vamos usar o pseudo lamin anterior para Aqui, vou amarrar o cólon antes do pseudo-elemento Então, dentro dos proprietários da primeira propriedade, eu vou usar o conteúdo O conteúdo é um conteúdo em branco. Lá eu vou definir a posição. Posição, vou torná-la absoluta. Depois disso, vou definir a largura, Largura, aqui, vou usar a largura de oito pessoas. 8% desse botão. Em seguida, vou definir altura, altura e vou aumentar a altura, então vou usar 500% 500% da altura desse botão. Em seguida, vou definir uma cor de fundo. Cor de fundo, vou usar a cor vermelha vermelha. E eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Agora vou centralizar esse elemento metror desse botão Para isso, vou passar para value, top, e vou passar 50%. Em seguida, vou definir a posição dos lábios, p também 50%. Em seguida, vou usar a propriedade transform, transforme, vou passar o valor de translação, traduzir e -50% Para XX e para xs -50%. Vou configurar esse arquivo. Eu aceito esse arquivo. Era assim que parecia. Alinhamos com sucesso esse elemento no meio desse botão Agora, o fundo vermelho está centralizado dentro do botão. Mas o problema é que está na frente do texto e eu quero que o texto apareça na frente dele. Vou pular para o seletor de extensão e aqui, vou usar o índice Z, o índice Z, vou passar menos menos um e vou definir esse arquivo Esse arquivo, como você pode ver , resolve o problema. Então, para obter o efeito de corte, vou girar esse elemento Aqui eu vou digitar, girar e vou girá-lo até 60 DEG, vou subtrair esse arquivo Acho que vou girá-lo e girá-lo em direções opostas, então vou fazer com que seja -60 graus e depois de definir esse arquivo, você poderá ver Giramos esse elemento no sentido anti-horário. Agora, vamos trabalhar no efeito flutuante. Ao passar o mouse sobre esse link, quero estender a largura desse elemento vermelho Quero fazer com que 100%, em vez de 8%, encobriremos completamente o link. Mas antes, na minha tag span, adicionarei transições, todas as transições , todas as transições, e adicionarei 0,22 segundos Depois disso, vou criar um seletor de foco antes do spentag Dois pontos pairando. Espaço, extensão, então vou amarrar cólon, cólon antes. Em seguida, dentro dos calibradores. Primeiro, vou estender a maconha, se eu passar meus carros sobre ela Nós, alguns conjuntos com 100 por si. Depois disso, vou mudar a cor do plano de fundo. Cor de fundo, vou torná-la preta. Agora, depois de configurar esse arquivo, se eu passar o mouse sobre este link, você poderá ver o resultado Ele se estende até 100%, além disso, o torna preto quando eu passo o mouse sobre ele Por causa dessa cor preta, não conseguimos mais ver o texto. Quando eu passo o mouse sobre esse link, quero deixá-lo branco Vou amarrar Anchor Hover. Então, dentro do vestido colorido vou fazer a cor branca. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar minha cor sobre ele, você poderá ver o resultado Com isso, ao passar o mouse, quero girar esse Eu quero fazer 60 graus quando eu passar o mouse sobre ele. 60 graus positivos. Vou copiar essa linha e colá-la aqui. Vou mudar 60 graus negativos para 60, 60 graus positivos e vou definir esses cinco. Sempre que passo o mouse sobre esse link, como você pode notar, a raiz do fundo vermelho está a 60 graus E a única coisa é tarde, precisamos mudar o fundo vermelho e torná-lo branco. Por causa disso, vamos conseguir esses dois cortes. Vou pular para a seção de elementos anteriores e vou torná-la vermelha para branca. Vou configurar esse arquivo. Depois de definir este arquivo, aqui você pode observar os recortes Além disso, vou entrar no seletor anctag e Eu vou dizer que transborda, transborda calor. Estouro atômico oculto, se eu definir esse arquivo, como você pode ver, acho que há um problema com ele porque acho que sim, precisamos usar o dimensionamento da caixa Não usamos o tamanho da caixa para isso. Vou usar a estrela seletora universal e dentro do quadrado dentro do Calibra aqui, vou digitar o tamanho da caixa Boerbx de tamanho da caixa. Se eu definir esse arquivo, você poderá ver o resultado. Agora temos esses dois cortando meu botão interno. Se eu mantiver minha maldição sobre ele, você poderá ver o resultado. É assim que ele anima esse botão. Basicamente, aumenta a largura desse elemento anterior. Em vez de 8%, ele aumenta até 100% e fornece esse lindo efeito de passar o mouse sobre o botão Espero que não seja uma calúnia para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 20. CSS 3D flip-over puro: efeitos de hover de botão 3D puros: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro projeto. E hoje, neste projeto, vamos criar esse lindo efeito de botão flutuando Vamos criar esse efeito de foco de três botões D. Como você pode ver, há um botão. Se eu colocar meu cursor nele, você poderá ver o resultado. Aqui você pode ver a parte oposta desse botão. Ele aperta o botão e retorna um novo sabor. Clique aqui. É um botão de animação do efeito Her, mas é bem avançado. Então, sem perder tempo, vamos começar a prática e ver como funciona Como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão de servidor lp. Além disso, você pode ver que eu já criei um documento HTML chamado index dot steml Com isso, eu crio um arquivo CSS, estilo dot CSS, e como você pode ver, eu vinculo esse arquivo de estilo a este documento ETML Então, primeiro, vou criar uma tag NCat dentro da tag body, tipo S A. Por padrão, eu não quero redirecioná-la, então eu quero usar a tag has Agora, dentro dessa tag âncora, vou criar três novas tags span, span class, front Em seguida, vou duplicar essa tag de extensão no tempo. Nosso primeiro nome de classe de extensão é front e nosso segundo nome de classe de extensão é centro, tipo de soma, centro. Nosso último nome de classe de span é SDType B. Em seguida, na parte frontal, vou digitar click e na parte traseira, vou digitar hair Para nossa etiqueta de extensão central, quero deixá-la em branco. Se eu definir esse arquivo, como você pode ver, como você pode ver no meu navegador, aqui ele imprime, clique aqui, canto superior esquerdo deste navegador. Eu fiz com sucesso nossa parte estável. Vamos passar para o arquivo CSS e estilizar esta página. No começo, vou estilizar nossa etiqueta corporal, algum tipo de corpo. Dentro da classe, vou definir zero marinho, zero Barzin e também quero definir preenchimento zero, preenchimento zero Em seguida, vou usar a propriedade da família de fontes SoTypeFont R: Vou definir uma cor de fundo escura para o nosso corpo. Antecedentes. E eu vou usar hexa VH, 26, 26, 26 Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver no meu navegador, agora nossa cor de fundo é cinza escuro e agora precisamos estilizar essa tag âncora Dentro da etiqueta de ancoragem, temos um total de três etiquetas de panela Então, vamos estilizar a etiqueta âncora. Então, ardósia, A, dentro do recesso de Cali. Em primeiro lugar, vou usar a posição da propriedade position. Posição absoluta. Agora eu quero alinhar essa tag âncora no meio desta página. Para isso, vou usar a melhor propriedade, os 50% melhores. Então eu vou usar a propriedade P. P 50%. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele alinha nossa tag âncora no meio desta página da web Em seguida, vou usar a propriedade transform. Então digite, transforme aqui, transforme. Transforme, traduza. Como você sabe, usando o método translate, podemos mover um elemento de sua posição atual de acordo com XXs e YX Para XXs, vou passar -50% para YxS e também vou Então eu vou dizer maconha aumentada para esta etiqueta de encer. No começo, vou amarrar maconha. Com 200 pixels. E então eu vou dizer que é propriedade de altura, altura, altura, 60 pixels. Se eu definir esse arquivo, você poderá ver o resultado. E então eu vou dizer alinhamento de texto no centro. Centro de alinhamento de texto. Como você sabe, vamos criar um botão uber de três D. Para isso, precisamos usar outra propriedade, que é estilo de transformação, tipo Sumo, estilo de transformação. Transforme o estilo aqui, vou usar preservar três valores D. Essas propriedades especificam como os elementos aninhados são renderizados em três espaços D. Como você sabe, precisamos usar essa propriedade com a propriedade transform. Sem a propriedade de transformação, não podemos usar essa propriedade. Aprendemos sobre isso em nossa série de tutoriais. Em seguida, vou usar outra propriedade que é Prospectiva Prospectiva de 1.000 pixels Também vou dizer transformar ou em posição, transformar ou centro Z. Se eu definir esse arquivo, como você pode ver, agora ele alinha perfeitamente nosso conteúdo no meio desta página da web Não podemos entender essa transformação prospectiva e tridimensional porque não estilizamos nosso objeto de extensão Agora precisamos estilizar nosso objeto sobressalente. Como você pode ver, temos um total de três objetos de extensão. Vamos estilizar todo o objeto de uma só vez. Para isso, vou selecionar a tag span. Espaçamento. É que o Kalis é, a princípio, eu vou digitar propriedade de posição Posição absoluta. Em seguida, precisamos alinhar essa tag de extensão, forma que o zero no topo seja zero E também vou dizer altura e peso, altura, 100%. Peso, 100%. E então eu vou usar o bloco Display. Além disso, vou alinhar o texto dentro da tag span Então, vou digitar texto alinhar texto alinhar centro. E então eu vou definir a altura da linha, altura da linha, 60 pixels. Se eu definir esse arquivo, aqui você pode vê-lo sobreposto ao nosso texto. Em seguida, vou definir o tamanho da fonte, tamanho da fonte, 24 pixels. Além disso, vou definir uma cor de fundo para a tag span. Antecedentes. Vou usar o RGVaValu RGB Como você sabe, primeiro, precisamos passar o valor vermelho, depois precisamos passar o valor verde e, finalmente, o valor azul. Com isso, precisamos passar por Alpha Val. Podemos controlar a transparência usando Alpha Val. É por isso que precisamos usar esse olmo. Então, aqui, eu vou passar 255 para vermelho, 255. E então eu vou passar mais uma vez, 255 para verde e também 255 para azul E para o nosso Alpha Valu, vou passar de 0,10 E agora precisamos mudar o estilo de transformação. Então, vou amarrar transform style transform style, preserve três D. Agora eu não quero mostrar a parte de trás da nossa tag span Quando ele gira, não queremos mostrar a parte traseira. Para isso, precisamos usar o Apoparty e você sabe disso, que é a visibilidade do backspace Volte para a visibilidade do Backspace, e vou definir um valor oculto porque não quero mostrar a parte traseira Em seguida, vou definir o raio da borda da tag span, o raio da borda, raio da borda, 30 pixels ou a próxima propriedade takes transform Em seguida, quero transformar o texto em maiúsculas. Para isso, vou usar a propriedade Tex transform, takes transform, em maiúsculas Em seguida, vou definir uma cor para o nosso texto. Cor branca. Se eu definir esse arquivo, você poderá ver o resultado. Com isso, quero dizer que é propriedade de transição. Transição. 1 segundo. Como você sabe, temos um total de três objetos de extensão dentro da tag cat. Vou transformar toda a tag span de forma diferente. Primeiro, vou transformar o da frente e depois vou transformar o traseiro. Por fim, vou transformar a central e vamos executar a transformação usando Her selected. Vamos voltar ao arquivo CSS e começar com nossa primeira tag span. Vou digitar span dot front. Então, dentro dos aliases, vou usar a propriedade transform, Transform, transform, rotate, X, e quero girá-la Com isso, quero movê-lo na direção de Zdx. Então, vou digitar translate ZT pixel. Se eu definir esse arquivo, você não poderá ver o resultado porque quero fazer essa transformação ao passar o cursor sobre esse botão Agora eu quero girar esse botão quando eu escuto nele. Para isso, precisamos criar um seletor Her. Então, vou duplicar essa linha e vou amarrar, cortar a etiqueta, passar os dois pontos Então, quando eu passo o cursor, quero girar nossa etiqueta frontal menos 18d Se eu definir esse arquivo e passar o cursor sobre ele, você poderá ver o resultado Você pode ver nossa primeira etiqueta de extensão girar menos 180 graus. A mesma coisa que precisamos fazer com nossa etiqueta de backspan. Então, vou selecionar esse código e obteremos essa linha. Então, aqui vou digitar span dot B. Por padrão, quero girá-lo em 180 graus e vou usar o mesmo valor de pixel de trânsito Em nosso seletor Hober, quero girá-lo em zero DD, voltar e quero girá-lo Se eu definir esse arquivo e as Hobermcas estiverem nele, agora você poderá ver o efeito giratório Agora, quero definir uma cor de fundo para nossa tag de extensão central. Essa. Para isso, vou digitar span dot center. Dentro das aliras, vou usar a propriedade de fundo. fundo, e eu vou usar gradiente de cor, e vou usar gradiente linear E eu vou usar a direção labial. Então, eu quero passar para isso. Oma e agora vou usar hexa Color Val tem tag, C 30 1a5b É uma cor rosa e nossa próxima cor é a etiqueta 7129 BD. É uma cor roxa. Se eu colocar este arquivo, você pode ver o resultado. Agora, para nosso objeto de extensão central, quero ativar a visibilidade do backspace Vou digitar Backpace visibility e vou usar o Visual Value Em seguida, vou criar o seletor Over para nossa tag de extensão central Vou remover a palavra-chave front e vou digitar center. Para rotações, vou usar menos 180. Mas para traduzir st, vou usar zero pixel. Se eu definir esse arquivo e Huber Mikaza neste botão, você poderá ver os três efeitos D. Então, criamos com sucesso três botões D flip Huber. Espero que você goste desse projeto. Obrigado por assistir este DVD. Fique ligado no nosso próximo exercício.