[{"id":159,"created_at":"2023-12-29T10:30:53.623866+00:00","html":"\r\n Hover\r\n the\r\n Button\r\n","css":"@import url(https://fonts.googleapis.com/css?family=Oswald:400);\r\n\r\n\r\nhtml {\r\n font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n background-color: #333;\r\n display: grid;\r\n place-content: center;\r\n}\r\n\r\n.btn {\r\n font-family: 'Oswald', sans-serif;\r\n font-size: 1.4rem;\r\n text-transform: uppercase;\r\n // letter-spacing: .2rem;\r\n text-decoration: none;\r\n overflow: hidden;\r\n display: inline-block;\r\n padding: 0 4rem 0 3.8rem;\r\n color: #FFF;\r\n background: none;\r\n border: 1px solid #FFF;\r\n cursor: pointer;\r\n transform: translate3d(0, 0, 0);\r\n height: 50px;\r\n\r\n &:after {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n z-index: -1;\r\n height: 150%;\r\n background: #FFF;\r\n pointer-events: none;\r\n transform: translate3d(0, 45px, 0);\r\n transition: all 0.3s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);\r\n }\r\n\r\n i {\r\n font-style: normal;\r\n line-height: 4.5rem;\r\n display: inline-block;\r\n height: 100%;\r\n padding-left: 1px;\r\n padding-right: 1px;\r\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\r\n\r\n &:hover {\r\n transform: translate3d(0, -6px, 0);\r\n }\r\n }\r\n\r\n &:hover {\r\n color: #333;\r\n\r\n &:after {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n }\r\n}","js":"","user_id":"24c8783e-8cfd-47f1-ac9f-ac9a07eeaa73","project_key":"Aoz2E8","description":"Hover Button SCSS","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": true},"tags":["scss","hover","button","animation","effect","link"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":526}],"profiles":{"username":"nuur"}}]