Merge pull request #69 from DesignSystemsOSS/development

Development

Author: yashsehgal

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "eccentrictouch",
+  "version": "1.0.0",
+  "description": "Suffering from Frontend crises? Here's something that might interest you.",
+  "main": "index.js",
+  "scripts": {
+    "test": "eccentrictouch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yashsehgal/eccentrictouch.git"
+  },
+  "keywords": [
+    "thedesignsystems",
+    "css",
+    "library",
+    "eccentrictouch",
+    "opensource"
+  ],
+  "author": "yashsehgal",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/yashsehgal/eccentrictouch/issues"
+  },
+  "homepage": "https://github.com/yashsehgal/eccentrictouch#readme"
+}

src/lib/buttons/buttons.scss

@@ -833,4 +833,54 @@
 
 .cartoon_multi_layer_button:hover {
   box-shadow: 6px 24px 26px rgb(219, 219, 219);
-}
+}
+body{
+  display: flex;     /*            GLOWING BUTTON(NEON) */
+ height: 100vh;
+ background: black;
+ align-items: center;
+ justify-content: center;
+}
+button{
+ position: relative;
+ height: 60px;
+ width: 200px;
+ border: none;
+ outline: none;
+ color: white;
+ background: #111;
+ cursor: pointer;
+ border-radius: 5px;
+ font-size: 18px;
+ font-family: 'Raleway', sans-serif;
+}
+button:before{
+ position: absolute;
+ content: '';
+ top: -2px;
+ left: -2px;
+ height: calc(100% + 4px);
+ width: calc(100% + 4px);
+ border-radius: 5px;
+ z-index: -1;
+ opacity: 0;
+ filter: blur(5px);
+ background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+ background-size: 400%;
+ transition: opacity .3s ease-in-out;
+ animation: animate 20s linear infinite;
+}
+button:hover:before{
+ opacity: 1;
+}
+button:hover:active{
+ background: none;
+}
+button:hover:active:before{
+ filter: blur(2px);
+}
+@keyframes animate {
+ 0% { background-position: 0 0; }
+ 50% { background-position: 400% 0; }
+ 100% { background-position: 0 0; }
+}