[{"id":54,"created_at":"2023-09-18T10:10:17.361443+00:00","html":"

\r\n \r\n

","css":"@import url('https://fonts.googleapis.com/css?family=Mukta:700');\r\n\r\n/* Variables */\r\n:root {\r\n --bg: #f3f8fa;\r\n --white: #fff;\r\n --black: #1b1e4e;\r\n}\r\n\r\n\r\n/* Reset */\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Body */\r\nbody {\r\n font-family: 'Mukta', sans-serif;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0;\r\n min-height: 100vh;\r\n background: var(--bg);\r\n}\r\n\r\n/* Button */\r\nbutton {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n outline: none;\r\n border: 0;\r\n vertical-align: middle;\r\n text-decoration: none;\r\n background: transparent;\r\n padding: 0;\r\n font-size: inherit;\r\n font-family: inherit;\r\n\r\n}\r\n\r\n#container {\r\n transition: ease all 400ms;\r\n}\r\n\r\n/* Learn More Button */\r\nbutton.learn-more {\r\n width: 12rem;\r\n height: auto;\r\n}\r\n\r\nbutton.learn-more .circle {\r\n position: relative;\r\n display: block;\r\n margin: 0;\r\n width: 3rem;\r\n height: 3rem;\r\n background: var(--black);\r\n border-radius: 1.625rem;\r\n}\r\n\r\nbutton.learn-more .circle .icon {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n margin: auto;\r\n background: var(--white);\r\n}\r\n\r\nbutton.learn-more .circle .icon.arrow {\r\n left: 0.625rem;\r\n width: 1.125rem;\r\n height: 0.125rem;\r\n background: none;\r\n}\r\n\r\nbutton.learn-more .circle .icon.arrow::before {\r\n position: absolute;\r\n content: '';\r\n top: -0.25rem;\r\n right: 0.0625rem;\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n border-top: 0.125rem solid #fff;\r\n border-right: 0.125rem solid #fff;\r\n transform: rotate(45deg);\r\n}\r\n\r\nbutton.learn-more .button-text {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n padding: 0.75rem 0;\r\n margin: 0 0 0 1.85rem;\r\n color: var(--black);\r\n font-weight: 700;\r\n line-height: 1.6;\r\n text-align: center;\r\n text-transform: uppercase;\r\n}\r\n\r\nbutton:hover .circle {\r\n width: 100%;\r\n}\r\n\r\nbutton:hover .circle .icon.arrow {\r\n background: var(--white);\r\n transform: translate(1rem, 0);\r\n}\r\n\r\nbutton:hover .button-text {\r\n color: var(--white);\r\n}\r\n\r\n/* Adjusted Hover Effects */\r\nbutton.learn-more .circle {\r\n /* Other existing styles remain unchanged */\r\n transition: width 0.4s ease;\r\n /* Added transition for smoother width change */\r\n}\r\n\r\nbutton:hover .circle {\r\n width: 12rem;\r\n}\r\n\r\nbutton.learn-more .circle .icon.arrow {\r\n /* Other existing styles remain unchanged */\r\n transition: transform 0.4s ease;\r\n /* Added transition for smoother transform */\r\n}\r\n\r\nbutton:hover .circle .icon.arrow {\r\n transform: translateX(0.5rem);\r\n /* Adjusted transform for a smoother movement */\r\n}","js":"// code here","user_id":"4529d7ae-0865-47e6-850e-f9cbf1ed7d3c","project_key":"A9yGPk","description":"Link/Button Hover Animation","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":["button","hover","link","animation","button animation","hover animation","link animation"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":359}],"profiles":{"username":"abdulmumin"}}]