{"html":"<section class=\"portfolio-experiment underline_animated_button\" id=\"{{uc_id}}\">\n  <a href=\"{{link}}\" {{link_html_attributes|raw}}>\n    <div class=\"text\">{{text|raw}}<\/div>\n    <div class=\"line -right\"><\/div>\n    <div class=\"line -top\"><\/div>\n    <div class=\"line -left\"><\/div>\n    <div class=\"line -bottom\"><\/div>\n  <\/a>\n<\/section>","css":"#{{uc_id}}\n{\n  text-align:{{alignment}};\n}\n\n#{{uc_id}} a {\n  padding: 0.7em calc(0.7em * 1.2);\n  display: inline-block;\n  border: {{border_width}}px solid transparent;\n  position: relative;\n  cursor: pointer;\n  text-decoration:none;\n}\n#{{uc_id}} a .text {\n  transform: translate3d(0, 0.7em, 0);\n  display: block;\n  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s;\n}\n#{{uc_id}} a:after {\n  position: absolute;\n  content: '';\n  bottom: -{{border_width}}px;\n  left: calc(0.7em * 1.2);\n  right: calc(0.7em * 1.2);\n  height: {{border_width}}px;\n  background: {{brdr_clr}};\n  transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;\n  transform-origin: left;\n}\n#{{uc_id}} .line {\n  position: absolute;\n  background: {{brdr_clr}};\n}\n#{{uc_id}} .line.-right, #{{uc_id}} .line.-left {\n  width: {{border_width}}px;\n  bottom: -{{border_width}}px;\n  top: -{{border_width}}px;\n  transform: scale3d(1, 0, 1);\n}\n#{{uc_id}} .line.-top, #{{uc_id}} .line.-bottom {\n  height: {{border_width}}px;\n  left: -{{border_width}}px;\n  right: -{{border_width}}px;\n  transform: scale3d(0, 1, 1);\n}\n#{{uc_id}} .line.-right {\n  right: -{{border_width}}px;\n  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;\n  transform-origin: top;\n}\n#{{uc_id}} .line.-top {\n  top: -{{border_width}}px;\n  transition: transform 0.08s linear 0.43s;\n  transform-origin: left;\n}\n#{{uc_id}} .line.-left {\n  left: -{{border_width}}px;\n  transition: transform 0.08s linear 0.51s;\n  transform-origin: bottom;\n}\n#{{uc_id}} .line.-bottom {\n  bottom: -{{border_width}}px;\n  transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);\n  transform-origin: right;\n}\n#{{uc_id}} a:hover .text,\n#{{uc_id}} a:active .text {\n  transform: translate3d(0, 0, 0);\n  transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s;\n}\n#{{uc_id}} a:hover:after,\n#{{uc_id}} a:active:after {\n  transform: scale3d(0, 1, 1);\n  right: -{{border_width}}px;\n  left: -{{border_width}}px;\n  transform-origin: right;\n  transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;\n}\n#{{uc_id}} a:hover .line,\n#{{uc_id}} a:active .line {\n  transform: scale3d(1, 1, 1);\n}\n#{{uc_id}} a:hover .line.-right,\n#{{uc_id}} a:active .line.-right {\n  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;\n  transform-origin: bottom;\n}\n#{{uc_id}} a:hover .line.-top,\n#{{uc_id}} a:active .line.-top {\n  transition: transform 0.08s linear 0.4s;\n  transform-origin: right;\n}\n#{{uc_id}} a:hover .line.-left,\n#{{uc_id}} a:active .line.-left {\n  transition: transform 0.08s linear 0.48s;\n  transform-origin: top;\n}\n#{{uc_id}} a:hover .line.-bottom,\n#{{uc_id}} a:active .line.-bottom {\n  transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;\n  transform-origin: left;\n}"}