Efeito Hover Ripple

brunorodris · brunorodris · commit 9d71381c146f · 2023-07-17T16:20:18.000-03:00
diff --git a/16 - efeito hover ripple/efeito.js b/16 - efeito hover ripple/efeito.js
@@ -0,0 +1,10 @@
+
+var btn = document.querySelector(".button");
+
+btn.onmousemove = function(e){
+    var x = e.pageX - btn.offsetLeft;
+    var y = e.pageY - btn.offsetTop;
+
+    btn.style.setProperty('--eixoX', x + 'px')
+    btn.style.setProperty('--eixoY', y + 'px')
+}
diff --git a/16 - efeito hover ripple/index.html b/16 - efeito hover ripple/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Efeito Ripple</title>
+</head>
+<body>
+    
+    <a href="#" class="button"><span>Inscreva-se</span></a>
+
+    <script src="efeito.js"></script>
+</body>
+</html>
diff --git a/16 - efeito hover ripple/style.css b/16 - efeito hover ripple/style.css
@@ -0,0 +1,48 @@
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Outfit',sans-serif;
+}
+
+body{
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.button{
+    padding: 60px 100px;
+    background-color: #282828;
+    color: #fff;
+    border-radius: 120px;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+}
+
+.button span{
+    font-size: 30px;
+    position: relative;
+    z-index: 999999;
+}
+
+.button::before{
+    content: '';
+    background-color: #fe6600;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: var(--eixoY);
+    left: var(--eixoX);
+    border-radius: 50%;
+    transform: translate(-50%,-50%);
+    transition: width .5s, height .5s;
+}
+
+.button:hover::before{
+    width: 1000px;
+    height: 1000px;
+}
