matheussbs
-
Total de itens
2 -
Registro em
-
Última visita
Tudo que matheussbs postou
-
Link Universal para vários botões
pergunta respondeu ao FRANCISCO KAUE OLIVEIRA SAMPAIO de matheussbs em HTML, XHTML, CSS
Pode usar dessa forma apenas com o botão: <button onclick="window.location.href='https://www.google.com.br'"">Continue</button> -
Percebo que quando passo o mouse no botão Power o botão sobe e aparece o blur da forma que eu quero, porém por eu estar usando transition isso reflete no meu texto fazendo com que ele esmaeça, fique um pouco desfocado durante o hover. De que forma posso arrumar isso? Outra dúvida é de como que posso fazer o blur aparecer mais suavemente já que ele é um before já pronto digamos? Codesandbox: https://codesandbox.io/s/nameless-sunset-f679f?file=/style.css:0-1547 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <title>Static Template</title> </head> <body> <div class="container"> <div class="box"> <div class="button"> <svg class="power" width="31" height="34" viewBox="0 0 31 34" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M24.9581 8.95874C26.8418 10.8467 28.1244 13.2518 28.6439 15.8701C29.1634 18.4883 28.8963 21.2021 27.8765 23.6683C26.8567 26.1345 25.1299 28.2424 22.9145 29.7253C20.6991 31.2083 18.0946 31.9999 15.4302 31.9999C12.7659 31.9999 10.1613 31.2083 7.94593 29.7253C5.73053 28.2424 4.00376 26.1345 2.98395 23.6683C1.96414 21.2021 1.69709 18.4883 2.21656 15.8701C2.73603 13.2518 4.0187 10.8467 5.90238 8.95874" stroke="#590AA3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path opacity="0.5" d="M15.4375 2V16.9979" stroke="#590AA3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <div class="content"> <h3>Titulo</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic eos consectetur quidem sunt explicabo aliquam corrupti nulla necessitatibus enim, debitis officiis, ducimus nihil cumque in rerum accusamus tenetur tempora nemo. </p> </div> </div> </div> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; } .container { width: 700px; height: 800px; /* border: 1px solid red; */ display: flex; align-items: center; justify-content: center; background: #000; } .box { width: 500px; height: 500px; background-color: blue; transform: skewY(-5deg); display: flex; /* justify-content: center; */ align-items: center; flex-direction: column; } .button { margin-top: -45px; width: 100px; height: 100px; background: #13161d; transform: skewY(5deg); display: flex; justify-content: center; align-items: center; } .button::before { content: ""; width: 60px; height: 30px; background: crimson; filter: blur(15px); border-bottom: 2px solod crimson visible; position: absolute; bottom: 0; visibility: hidden; transition: 0.4s; /* transition-timing-function: ease; transition-delay: 0.3; */ } .button:hover:before { visibility: visible; } .button:hover path { stroke: red; } svg { transition: 0.4s; transition-timing-function: ease-in-out; width: 50px; height: 50px; } path { stroke: blue; } .button:hover svg { transform: translate(0, -15px); } .content h3 { margin-top: 60px; transform: skewY(5deg); text-align: center; font-size: 48px; color: darkgrey; width: 90px; } .content p { margin-top: 20px; transform: skewY(5deg); /* border: 1px solid red; */ width: 300px; color: #fff; font: 20px "sans-serif", arial; /* text-align: center; */ }