{"html":"<div id=\"{{uc_id}}\">\n<a class=\"skew-button\" href=\"{{link}}\" {{link_html_attributes|raw}}>\n\t<div>{{btn_txt|raw}}<\/div>\n<\/a>\n<\/div>","css":"#{{uc_id}} * {\n  box-sizing: border-box;\n}\n\n#{{uc_id}}\n{\n\ttext-align:{{alignment}};\n}\n\n#{{uc_id}} .skew-button {\n  cursor: pointer;\n  outline: none;\n\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  position: relative;\n  display: inline-block;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  letter-spacing: 0.1em;\n  color: #fff;\n\ttext-decoration:none;\n\tfont-size:18px;\n}\n#{{uc_id}} .skew-button div {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: 20px 50px;\n  z-index: 3;\n}\n#{{uc_id}} .skew-button:before,\n#{{uc_id}} .skew-button div:before {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%) skewX(-20deg);\n          transform: translate(-50%, -50%) skewX(-20deg);\n  width: 100%;\n  height: 50px;\n  border: 1px solid {{brdr_clr}};\n  z-index: 2;\n}\n#{{uc_id}} .skew-button div:before {\n  display: block;\n  -webkit-transform: translate(-50%, -50%) skew(-20deg);\n          transform: translate(-50%, -50%) skew(-20deg);\n  -webkit-transform-origin: center center;\n          transform-origin: center center;\n  z-indeX: -1;\n}\n#{{uc_id}} .skew-button:after {\n  transition: all 100ms ease-out;\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  -webkit-transform: skewX(-20deg) scaleX(0);\n          transform: skewX(-20deg) scaleX(0);\n  width: 100%;\n  height: 100%;\n  background-color: #0e3876;\n  border: 1px solid transparent;\n  z-index: 1;\n}\n#{{uc_id}} .skew-button:hover div:before {\n  -webkit-animation: fill .5s ease-out;\n          animation: fill .5s ease-out;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n}\n#{{uc_id}} .skew-button:hover:after {\n  -webkit-animation: swoosh .7s ease-in;\n          animation: swoosh .7s ease-in;\n}\n#{{uc_id}} .skew-button:active:before {\n  background-color: {{active_clr}};\n}\n\n@-webkit-keyframes swoosh {\n  0% {\n    -webkit-transform-origin: left center;\n            transform-origin: left center;\n  }\n  20% {\n    -webkit-transform: skewX(-20deg) scaleX(1);\n            transform: skewX(-20deg) scaleX(1);\n    -webkit-transform-origin: left center;\n            transform-origin: left center;\n  }\n  21% {\n    -webkit-transform-origin: right center;\n            transform-origin: right center;\n  }\n  50% {\n    -webkit-transform: skewX(-20deg) scaleX(0);\n            transform: skewX(-20deg) scaleX(0);\n    -webkit-transform-origin: right center;\n            transform-origin: right center;\n  }\n}\n\n@keyframes swoosh {\n  0% {\n    -webkit-transform-origin: left center;\n            transform-origin: left center;\n  }\n  20% {\n    -webkit-transform: skewX(-20deg) scaleX(1);\n            transform: skewX(-20deg) scaleX(1);\n    -webkit-transform-origin: left center;\n            transform-origin: left center;\n  }\n  21% {\n    -webkit-transform-origin: right center;\n            transform-origin: right center;\n  }\n  50% {\n    -webkit-transform: skewX(-20deg) scaleX(0);\n            transform: skewX(-20deg) scaleX(0);\n    -webkit-transform-origin: right center;\n            transform-origin: right center;\n  }\n}\n\n@keyframes fill {\n  0% {\n    background-color: {{background_from}};\n  }\n20% {\n    opacity: .5;\n    border-width: 15px;\n    border-color: {{background_middle}};\n  }\n  100% {\n    opacity: .5;\n    border-width: 1px;\n    background-color:{{background_to}} ;\n  }\n}"}