Button Animation with Hover Effect | Html & CSS
Вставка
- Опубліковано 19 жов 2024
- In this video we will make a button, in the body of the html we create a main div then we will center and align the items to the center.
In the style we put in the button a size, borders, color, transition, thickness, font size and a shading.
Finally we put the hover effect, a font color, a transparent background, a transform with rotation and scale, a grab cursor, borders and a shadow.
Satisfatório o barulho das teclas kkkkkk
Not at all
Tu é doido pra gostar desse plec-plec
@@rodbrowning yes it is
@@Weeex521 é nada, coloca um fone de ouvido que fica bom
Realmente muito satisfatório kkkk
Como é bonito cara, você pensa que é um simples botão, mas na verdade são centenas de códigos por trás incrível ❤️estou estudando CSS e JavaScript que massa esses linguagens.
@Anderson Pereira só tem um probleminha nisso tudo, isso do vídeo é CSS kkkkkkkk
@@JoaoVictor-ru7it to ligado kkkkk.
@@JoaoVictor-ru7it ué n entendi, acho q ele sabe
@@brunooo1086 anteriormente ele tinha escrito que estava estudando Javascript, agora ele acrescentou o CSS no comentário
@@JoaoVictor-ru7it ss, esqueci de por o CSS e apenas coloquei JavaScript, correção no texto.
Não vejo a hora de chegar num nível pra começar a trabalhar na área, mas me prendo demais na teoria, tenho q praticar mais 🥺
Caraca, tamo igual.
@@DANROYALE Vou te dar um concelho. Vê as aulas do professor Gustavo Guanabara.
Se estás mesmo no começo, aconcelho fazer o curso "HTML5 [40 Horas]" primeiro. Nesse curso ele vai explicar de forma incrível HTML, CSS e um pouco de JS, para quem está a começar.
Depois fazes todos os cursos de "HTML 5 E CSS 3" desde o módulo 1 até ao módulo 5. Faz tudo por ordem. No fim de todos os módulos é impossível de não saberes quase tudo sobre CSS.
Por fim, vais para os cursos de uma linguagem de programação.
Eu escolhi JS, mas lá também tem python que se queres que eu diga está mais completo que JS. O professor Gustavo Guanabara só fez curso de JS para iniciantes, mas aconselho a fazer à mesma porque dá-te uma base incrível para puderes avançar.
Depois disto se não souberes inglês recomendo fazeres os curso de inglês do professor Gustavo Guanabara, porque vai ser importante para o próximo passo.
Por último, vê todos os cursos de JS no yt da universade de Harvard ou se escolheste Python vê o curso completo de 24 horas da universidade de Harvard no yt.
Depois de tudo isto vais estar a 100%.
*eu olhando isso em público fingindo entender tudo*
Eh incrível como algo tão simples, passa por processos longos/difíceis.
Carai isso tudo pra um botão? Fascinante cara 😂
O resultado ficou muito bom
Cara, a programação é simplesmente, definitivamente, inexplicavelmente, surpreendentemente... linda!!! Pois antes de conhecer, ao acessar uma página, usar um software, ligar um PC etc..pra mim era só aquilo que estava vendo diante dos meus olhos, nem imaginava que por trás de todas aquelas interações, funções e animações, avia tantos códigos, sla...eu tento explicar com palavras o quão a programação é..., mas não as encontro.
Programação é uma merda, coisa chata 😩
@@wallacesousuke1433 teu pai
@@wallacesousuke1433 por isso que você é um fracassado você só fala que é uma merda mas não aprende nada você não se esforçar você procura o motivo pra desistir para com isso e vai trabalhar aí tu vai entender o quanto de dinheiro um programador ganha
@@wallacesousuke1433 Cala boca
@@davidalves7949 nerdão 🤓🤓
Quando acabou foi que eu percebi que o visual das alterações estavam sendo processadas abaixo do código 🤡
tbm mano
E eu que só percebi, quando li esse comentário kkk
Eu reparei só agr😂
Lendo seu comentário
" caralho, olha os Deuses! "
Estou estudando atualmente HTML, CSS e Javascript muito bom aprender mais, vou aprender UI e UX também que ajuda muito, quero ser front end preciso aprender bem as telas
já aprendeu muita coisa? vou fazer curso de front end to tentando estudar em casa pra ter noção básica, mas to muito perdida no css kkkkkkk
@@Nandakrll Curso em Vídeo, 4 modulos de html e css
esse barulho das teclas é muito satisfatório
Mano, coloca esses titulos em ingles, vc n fala nada, vai atingir mais publico
stonks kkkkkkk
kkkk@@ghanki1773
Eu amo essa linguagem de programação ❤
Só uma observação, css não é linguagem de programação
HTML e CSS são linguagens de marcação, e Javascript e demais linguagens que geram interatividade pro site que podem ser chamados de programação, pq elas tem uma sequência lógica de passos. Enfim, basicamente. HTML (conteúdo), CSS (visual), e Javascript (interatividade)
Só eu entendi tua ironia cara kkkkkkkkkk
Entedi kkkk
@@Italoxit kkkkkkkkkkkkkkkkkk
Comecei a mês passado um curso de html5 e css3, tenho 14 anos e pretendo ano que vem fazer um curso de Java script e Python, adoro programar e aprender essas linguagens diversas, espero que de tudo certo no ramo.
Olá @Levi21_05, aprenda um pouco a cada dia, o mais importante é continuar persistindo, mesmo nos momentos em que tudo parece difícil, porque a cada linha de código que você escreve, cada problema que você resolve, te leva um passo mais perto do seu objetivo. Faça exercícios e aprimore suas habilidades com treino constante. E adicione nos seus estudos lógica de programação .
@@WebOnlineDesenvolve valeu pelas dicas mano tmj
É top de mais 😍
Um dia chego lá
Ficou irado parabéns meu bom
Muito bom 🎉🎉
Um verdadeiro Gênio 😳
ficou top demais, já vou usar esses comandos
Já aprendi lógica usando o visualG e agora estou estudando HTML e CSS, mais alguém ?
Eu aqui 🤚
E está sendo uma ótima experiência! kk
Muuuitooo top❤
Fantástico 😍
Muito bom, gostei 👍.
Ficou muito bom.
Quero ver ele criar uma Inteligência Artificial com JS kkk
NÍVEL INSANO KSK
Quero ver também quem é o psicopata que vai inventar de usar JS pra backend
@@Jonas.Carvalho kkkkk não dúvido muito que alguém já fez isso😂😂😂😂😂😂
Mas quando o cara vai apertar em um botão com hover fica bugado, no celular
sim por isso em botões é bom usar o :active envés do hover
que isso meu filho calma
lkkkkkkkkkkkkkkk o cara dubklou o teclado todo troncho asçdlkandçjklasjndçlkajdçaskld
Desculpe eu sou iniciante nesse meio , Mais gostaria de saber como vc abriu 2 botão no Html so que na hora de estilisar foi como se tivesse sido apenas 1 ? Tipo vc colocou 2 botão nesse processo porem na hora de arrumar no css não foi duplicado , Ficou apenas 1 vc arrumando . Acho que deu pra entender minha duvida né ??? Se puder me responder eu agradeço ...
Olá @lucaspereira1189, para esse exemplo foi criado uma com classe com nome botão e dentro dela foi criado um button com uma classe chamada de 'btn'. A foi estilizada para alinhar os elemento e a classe 'btn' para tamanho, cor, fonte, espessura , transição e efeito de sombra no botão e hover com uma escala de rotação.
Fantástico
Onde que ta aparecendo aquele botão em tempo real ali embaixo? No navegador mesmo ou é alguma configuração/extensão do VScode?
Olá ViniB, No vídeo o botão fica carregando no navegador, é uma extensão do Visual Studio Code chamada Live Server. Você também tem a opção de carregar dentro do editor do VScode.
@@WebOnlineDesenvolve Que foda! Vlw vou aderir kk
Mt legal o seu conteúdo, pena q esse layout do youtube reels É PORCO e quase n dá pra ver o botão direito
so quem sabe o quanto ganha um cara avançado de html sabe o quão rico deve ser esse cara
E vai é afundar esse teclado?
q agonia o som das teclas nn ser sincronizado com o vídeo
Tem esse vídeo devagar? eu queria ver passo a passo pra aprender. Ficou muito legal
Vai vendo, pausa, ve o que ta escrito, copia, testa e se tiver tudo certo, repete até o fim do vídeo
ESTOU ESTUDANDO HTML E CSS !!! IREI FAZER ISTO
Perfeito
Que cara bom
Como faz pra colocar o vídeo mais devagar? Jkkkk
Bom demais!
Olá Thiago Alexandre,
No desktop temos a opção de mudar a velocidade em configurações.
Uma outra forma seria colocar o vídeo novamente com uma velocidade que não fosse tão rápido como esse. kkkk
Esse teclado tirou minha ANSIEDADE
É no visual Studio code?
Olá @margaridalima666, é no Visual Studio Code
Com licença, você poderia me dizer qual app você baixou para programar em HTML? Eu não tenho ideia de qual baixar
Olá @matheusschollemberg2751, o editor de código-fonte utilizado no vídeo foi o Visual Studio Code. Segue link para download.
code.visualstudio.com/download
@@WebOnlineDesenvolve obrigado
Cadê o resultado?
Wow nyce vedio ❤️
I am also sruffing same kind of content
agonia os barulho de teclas não tão sincronizado é um áudio por cima
Uma dúvida ...vc está inserindo o CSS diretamente dentro do HTML??
É só abrir uma tag style dentro do html e pode estilizar o seu site, geralmente usam isso pra fazer coisas pequenas como no vídeo.
@@Diogo_medeiros01 eu sou iniciante maninho....fui testar no VSCode e deu certo kk legal
Olá @odairbarcala7868, fico feliz que você está conseguindo. Existem algumas maneiras de aplicar os estilos.
1.Você pode adicionar estilos diretamente a um elemento HTML usando o atributo "style".
Titulo
2. Você também tem a opção de usar o atributo "style" dentro da tag na seção .
3.Os Estilos em linha dentro de tags : Se você estiver trabalhando com um documento HTML completo e tiver uma seção , pode adicionar estilos inline dentro de tags
p {
color: blue;
}
@@WebOnlineDesenvolve eu conhecia só pela TAG link .. obrigado pela dica amigo, o mundo da programação é mais incrível doq eu imaginava
como fazer um video assim?? queria postar uns trabalhos meus tb e gostei dessa forma.
Olá @rafaelmelo3420, Você vai precisar baixar um programa de captura de tela, eu utilizo o OBS Studio, você configura o formato do vídeo para sua necessidade. Também vai ser preciso de um editor de vídeo.
Claro Que o Html Juntamente com o JavaS para montar um site são fundamentais concerteza , Porém na minha humilde opinião mesmo o CSS não sendo considerada como linguagem de programação ela é a mais importante para o front End trabalhar na hora de montar um site . Que linguagem complexa por conta de muitosss detalhes e da quantidade de linkamentos que trmos que fazer . Isso confunde muitoooooooo a mente ! Mais que video Foda slko . Gostaria muito de vc me dar algumas dicas seria foda aprender mais contigo mano ...
Precisa disso tudo só para fazer um botão 😲
Vi sua foto, bateu um cheirinho de bala de morango 😹😹😹
Avante
Qual programa você usa?
Gostei muito do vídeo😎
Olá @bolsonaroexterminadordofut8557, o programa é o Visual Studio Code.
Como é que faz pra ver em tempo real os código funcionando? É com extensão? (Estou aprendendo agora)
Olá @Fabio_Henrique, No Visual Studio Code, existem várias extensões que você pode instalar, como por exemplo: 'Live Server - Ritwick Dey', a extensão 'Live Preview' da 'Microsoft' e a 'Live Server Preview', para visualizar o código dentro do editor. "Uma dica importante: não hesite em tirar dúvidas. Em qualquer fase do aprendizado, buscar esclarecimento é fundamental."
Achei paia o rotate, mas ficou muito bom
Olá, sou novo na área, qual programa é utilizado?
Olá @kakadetona5771, Visual Studio Code.
E tem como fazer um de whatsapp que simula coma conversa?
Qual o nome do site que você usa?
Olá @user-pw7yq8yw6o, o editor de código-fonte é o Visual Studio Code
Queria saber como que faz a animação depois de tirar mouse
Olá @archivrale2598, Para criar uma animação em CSS que ocorre depois de tirar o mouse de um elemento, você pode usar a propriedade transition junto com a pseudo-classe :hover. A propriedade transition permite que você defina como as propriedades de estilo devem mudar com o tempo, criando um efeito de transição suave. Um exemplo: Passe o mouse aqui.efeito-hover {
font-size: 16px;
transition: font-size 0.3s;
}
.efeito-hover:hover {
font-size: 20px;
}. Note que a fonte aumentará suavemente de 16px para 20px ao longo de 0.3 segundos (definido na propriedade transition). Quando você retirar o mouse, a fonte voltará ao tamanho original com a mesma transição suave. Você também pode usar outras propriedades como @Keyframes, para criar animações mais complexas. Espero ter ajudado.
Este programa é o Visual Studio Code?
Olá @verdemaissaude5654, a IDE de desenvolvimento utilizada no vídeo é o Visual Studio Code.
Topp
como faz pra deixar esse painel embaixo atualizando
de onde surgiu aquele cursor?
Olá Marconeft
O Cursor grab, está no botão com hover, no código ele está na linha 35.
Mano é fácil fazer 1 botão?
Como define os valores dessas variáveis?
Entendi nada porém muito foda ksksksk
O que seria 100vh na altura?
Olá @Exaaaaaa, 100vh é uma medida de altura que significa "100% da altura da viewport". A viewport é a área visível de uma página da web dentro do navegador, ou seja, é a área em que o conteúdo da página é exibido. Então, "100vh" significa que a altura de um elemento será igual à altura da viewport.
Por exemplo, se você definir a altura de um elemento para "100vh", ele preencherá toda a altura visível da tela do dispositivo do usuário, independentemente da resolução ou do tamanho da tela. Isso é muito útil para criar layouts responsivos e para garantir que o conteúdo seja sempre visível, independentemente do dispositivo em que ele é exibido.
Man qual é o nome desse tema do Visual Studio??
Consegui reproduzir, mas não ficou girando que nem o dele. Não consigo identificar o erro 😂
Olá @gabrieldantas804, no button tem uma classe chamada de 'btn' ela tem o efeito :hover que serão ativados quando o usuário passar o mouse sobre o botão no vídeo o exemplo foi o seguinte:
.btn:hover{
transform: scale(1.5)rotate(360deg);
}
Masssaaa
O cara colocou 2 classes para botão
Opa ótimo vídeo!! Gostaria de saber como resolver um problema que estou tendo sou novo no SVCODE e estou tendo um problema que não estou conseguindo resolver. Ao colocar o código
So tenho uma coisa a dizer
Taporra kkssksk
qual tema c usa ?
Good job
Vou nem tentar aprender por agora moita coisa kkkkk
Programar neste nível é difícil?
Olá @mateusalison6721, esse nível é de iniciante.
@@WebOnlineDesenvolve tá de sacanagem kkkk eu achei a coisa mais difícil do mundo
Cara eu uso o notepad mas não consigo ver as cores no código tem como configurar
Olá Tiago da Silva,
No notepad ++ podemos configurar as cores de fundo , fonte e estilo.
No menu do editor :
Configurações < Configurações de estilos < Estilo Global
Outra opção seria o tema: Preferências < Modo escuro
Você tem várias opções tom personalizado.
Em relação as cores em hexadecimal existe um plugin que é o
" Quick HTML Color Picker " que ajuda na escolha da cor utilizada em seu projeto.
Espero ter ajudado.
@@WebOnlineDesenvolve Ola amigo muito obrigado pela sua atenção mas acho que lhe expliquei errado pois me referia as cores rgb aqui não aparece um cubo colorido
Tiago da Silva, vamos ver se eu entendi sua pergunta.
Você está se referindo as cores do seu projeto não monstra no notepad.
Por exemplo :
Quando digitamos color aparece um quadrado com a cor que foi digitada ,
color : 🟥 #ff0000 ;
Se for essa a sua dúvida é a extensão "COLOR HIGHLIGHT " do editor Visual Studio Code. Poriso que comentei sobre o plugin "Quick HTML Color Picker" utilizado no notepad++ ele não fica um quadrado como no vs code, mas fica sublinhado com a cor digitada.
@@WebOnlineDesenvolve Valeu amigo vou ver aqui
@@tiagodasilva3730 Esse recurso ja vem instalado no vs code, tenta usar essa idle
Que que o place items faz?
E engraçado que o cara ta parando de escrever e o barulho continua😂😂😂
Mano,qual é o nome do editor?
Olá @nsimbamariasolange2976, o nome do editor é o Visual Studio Code.
WordPress só clicar e arrastar
qual o nome desse aplicativo
Olá @enocx8259, O ambiente de desenvolvimento é o Visual Studio Code (VS Code)
Vai quebrar o teclado irmão.
Mano,como é o nome do site?,eu estudo pela Grasshopper d quero praticar
Olá @gazodoido1821, qual site você gostaria de saber o nome?
só pra fazer esse botão?
Olá @savio2702, isso é somente para fazer um botão.
@@WebOnlineDesenvolve muita coisa só pra fazer um botão
👍🏻
Para quem não entende parece que está fazendo bruxaria...
Alguém sabe me informar qual ferramenta é essa ????
A ferramenta de desenvolvimento utilizada é o Visual Studio Code.
Spck editor se for usar o cell, é lraticamente identico o vscode mas pa cell, eu uso muito pa testa javascript kssk
Vscode
Este teclado faz muito baruio, compra um Multilaser
Valeu Autovrum!
Vou seguir sua dica!
@@WebOnlineDesenvolve calma! É brincadwira, video m bom!
Isso só pq é front end
Border-radius: 1000; não seria melhor 50%
não kkkk 50% ia virar uma elipse, um ovo deitado. Ele ia pegar metade das duas medidas e arredondar até essa metade. 1000px também é sem sentido, já que o botão não tem nenhuma medida de 2000px. O cara que não sabe botar border-radius direito.
border-radius de 50% criaria um círculo perfeito
E aparentemente quase ninguém sabe.
Ele definiu um valor estático, utilizando pixeis, isso não torna a borda dinâmica, caso o objeto fosse maior que 1000px teria problema, o certo mesmo é usar:
border-radius: 25%/50%;
pra qualquer tamanho e altura.
Tem como faze o botao direciona a pessoa pra outra pagina? Quando agente clica nele?
tectectectectectectectectectec
😹😹😹😹😹
Preciso aprender inglês pra isso?
Olá @kleber.lourenco3251, não é necessário aprender inglês para aprender programação, no começo sempre é um pouco confuso, pois a sintaxe das linguagens de programação é baseada em Inglês e a semântica em Português. A semântica se refere ao significado das instruções e expressões em um programa. Enquanto a sintaxe define como as instruções devem ser escritas, a semântica determina o que essas instruções realmente fazem. Mas com a prática você aprende e consegue dominar.
@@WebOnlineDesenvolve tá bom, obrigado pelo seu tempo
E como é o nome desse site?
Olá @valeriacristina5922, qual site você está se referindo? O exemplo do vídeo é somente uma animação de botão, ele foi criado para ajudar pessoas iniciantes a ter uma noção de como fazer uma animação. Espero ter ajudado.
Q site ou aplicativo
Estou começando a programar não sei ND tô procurando desesperado alguma coisa q me salvel
Olá @thucoribeiro5010 , o editor de código-fonte é o Visual Studio Code
Pegou do chat gpt ne kk, da pra perceber.
Quando ele postou esse vídeo o chat nem havia sido lançado
Só queria um pc pra programar.🥺
Man , pelo celular é possível, vai começar com html5 ou oque ? Posso te ajudar .
@@wokevns back end, e já tenho meu pc, mas obrigado
@@wokevns E eu tô mais no lado do pentest, já até a achei falhas de segurança no site da minha escola ksksksks
@@Esmek.ibr4 caraca kakakkka aí sim , é nóis 🙌