diff --git a/Hover Animations/Skewed Glowing Neon Button/index.html b/Hover Animations/Skewed Glowing Neon Button/index.html new file mode 100644 index 0000000..d5c117a --- /dev/null +++ b/Hover Animations/Skewed Glowing Neon Button/index.html @@ -0,0 +1,15 @@ + + + + + + + Glowing Neon Button + + + + + button + + + \ No newline at end of file diff --git a/Hover Animations/Skewed Glowing Neon Button/style.css b/Hover Animations/Skewed Glowing Neon Button/style.css new file mode 100644 index 0000000..5baa676 --- /dev/null +++ b/Hover Animations/Skewed Glowing Neon Button/style.css @@ -0,0 +1,58 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap'); + +* { + margin: 0; + padding: 0; + font-family: 'Poppins', + sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #000000; +} + +a { + position: relative; + display: inline-block; + font-size: 1.5em; + letter-spacing: .1em; + color: #0ef; + text-decoration: none; + text-transform: uppercase; + border: 2px solid #0ef; + padding: 10px 30px; + z-index: 1; + overflow: hidden; + transition: 1s; + transition-delay: 0s, 1s; +} + +a:hover { + color: #fff; + box-shadow: 0 0 10px #0ef, + 0 0 20px #0ef, + 0 0 30px #0ef, + 0 0 80px #0ef, + 0 0 160px #0ef; +} + +a::before { + content: ''; + position: absolute; + top: 0; + left: -50px; + width: 0; + height: 100%; + background: #0ef; + transform: skew(35deg); + z-index: -1; + transition: 1s; +} + +a:hover:before { + width: 100%; +} \ No newline at end of file