--- /dev/null
+* {
+ margin: 0;
+ padding: 0; }
+
+#canvas {
+ display: none;
+ position: absolute; }
+
+@font-face {
+ font-family: font;
+ src: url("font.woff"); }
+.container {
+ width: 146px;
+ height: 43px; }
+
+.btn {
+ width: 146px;
+ height: 43px;
+ position: absolute;
+ border: 0;
+ background-image: linear-gradient(90deg, #41a6c9 0%, #63c2b7 100%);
+ text-transform: uppercase;
+ color: white;
+ font-size: 11px;
+ transition: all 300ms ease-out;
+ -webkit-transition: all 300ms ease-out;
+ cursor: pointer;
+ font-family: font;
+ font-weight: 600; }
+ .btn::before {
+ position: absolute;
+ content: "";
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-image: linear-gradient(to bottom, #ffffff, #ffffff);
+ z-index: -1;
+ -webkit-transition: all 300ms ease-out;
+ opacity: 0; }
+ .btn::after {
+ position: absolute;
+ content: "";
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border: 2px solid;
+ border-image: linear-gradient(to left, #41A6C9 0%, #63C2B7 100%);
+ border-image-slice: 1;
+ -webkit-transition: all 300ms ease-out;
+ z-index: 3;
+ opacity: 0; }
+ .btn:hover {
+ color: #63C2B7;
+ -webkit-transition: all 300ms ease-out;
+ z-index: 2; }
+ .btn:hover::before {
+ opacity: 1; }
+ .btn:hover::after {
+ opacity: 1; }
+
+/*# sourceMappingURL=style.css.map */
--- /dev/null
+{
+"version": 3,
+"mappings": "AAAA,CAAC;EACC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGZ,OAAO;EACL,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;;;EAElB,WAAW,EAAE,IAAI;EACjB,GAAG,EAAE,gBAAgB;AACvB,UAAU;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;;AACd,IAAI;EACF,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,gBAAgB,EAhBP,gDAAsE;EAiB/E,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,IAAI;EACf,UAAU,EAAG,kBAAkB;EAC/B,kBAAkB,EAAG,kBAAkB;EACvC,MAAM,EAAE,OAAO;EACf,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,GAAG;EAChB,YAAS;IACP,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,gBAAgB,EAAE,4CAA4C;IAC9D,OAAO,EAAE,EAAE;IACX,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;EACZ,WAAQ;IACN,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,SAAS;IACjB,YAAY,EAAE,kDAAkD;IAChE,kBAAkB,EAAE,CAAC;IACrB,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;EACZ,UAAO;IACL,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;IACV,kBAAS;MACP,OAAO,EAAE,CAAC;IACZ,iBAAQ;MACN,OAAO,EAAE,CAAC",
+"sources": ["style.sass"],
+"names": [],
+"file": "style.css"
+}
\ No newline at end of file
--- /dev/null
+*
+ margin: 0
+ padding: 0
+$gradient: linear-gradient(90deg, rgba(65,166,201,1) 0%, rgba(99,194,183,1) 100%)
+
+#canvas
+ display: none
+ position: absolute
+@font-face
+ font-family: font
+ src: url("font.woff")
+.container
+ width: 146px
+ height: 43px
+.btn
+ width: 146px
+ height: 43px
+ position: absolute
+ border: 0
+ background-image: $gradient
+ text-transform: uppercase
+ color: white
+ font-size: 11px
+ transition: all 300ms ease-out
+ -webkit-transition: all 300ms ease-out
+ cursor: pointer
+ font-family: font
+ font-weight: 600
+ &::before
+ position: absolute
+ content: ""
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ background-image: linear-gradient(to bottom, #ffffff,#ffffff )
+ z-index: -1
+ -webkit-transition: all 300ms ease-out
+ opacity: 0
+ &::after
+ position: absolute
+ content: ""
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ border: 2px solid
+ border-image: linear-gradient(to left, #41A6C9 0%, #63C2B7 100%)
+ border-image-slice: 1
+ -webkit-transition: all 300ms ease-out
+ z-index: 3
+ opacity: 0
+ &:hover
+ color: #63C2B7
+ -webkit-transition: all 300ms ease-out
+ z-index: 2
+ &::before
+ opacity: 1
+ &::after
+ opacity: 1