--- /dev/null
+* {
+ margin: 0;
+ padding: 0; }
+
+#canvas {
+ display: none;
+ position: absolute; }
+
+@font-face {
+ font-family: font;
+ src: url("font.woff"); }
+.container {
+ width: 160px;
+ height: 43px; }
+
+.btn {
+ width: 160px;
+ 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;
+ box-shadow: 2px 4px 10px -1px rgba(0, 0, 0, 0.37); }
+ .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; }
+
+.arrow {
+ position: absolute;
+ width: 11px;
+ height: 1px;
+ background: white;
+ top: 17px;
+ left: 134px;
+ transform: rotate(45deg);
+ z-index: 55;
+ -webkit-transition: all 300ms ease-out; }
+ .arrow::before {
+ content: "";
+ position: absolute;
+ width: 11px;
+ height: 1px;
+ transform: rotate(-90deg);
+ background: white;
+ top: 5px;
+ left: 5px;
+ -webkit-transition: all 300ms ease-out; }
+
+.btn .txt {
+ position: relative;
+ left: -9px; }
+.btn:hover .arrow {
+ background: #63C2B7; }
+ .btn:hover .arrow::before {
+ background: #63C2B7; }
+
+/*# sourceMappingURL=style.css.map */
--- /dev/null
+{
+"version": 3,
+"mappings": "AAAA,CAAC;EACC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAKZ,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,EAlBP,gDAAsE;EAmB/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,UAAU,EAAE,qCAAqC;EACjD,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,EAlDD,OAAO;IAmDX,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;IAEV,kBAAS;MACP,OAAO,EAAE,CAAC;IACZ,iBAAQ;MACN,OAAO,EAAE,CAAC;;AAChB,MAAM;EACJ,QAAQ,EAAE,QAAQ;EAClB,KAAK,EA9DO,IAAI;EA+DhB,MAAM,EA9DO,GAAG;EA+DhB,UAAU,EAAE,KAAK;EACjB,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,KAAK;EACX,SAAS,EAAE,aAAa;EACxB,OAAO,EAAE,EAAE;EACX,kBAAkB,EAAE,kBAAkB;EAEtC,cAAS;IACP,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;IAClB,KAAK,EA1EK,IAAI;IA2Ed,MAAM,EA1EK,GAAG;IA2Ed,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE,KAAK;IACjB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,kBAAkB,EAAE,kBAAkB;;AAExC,SAAI;EACF,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,IAAI;AAEV,iBAAM;EACJ,UAAU,EArFR,OAAO;EAsFT,yBAAS;IACP,UAAU,EAvFV,OAAO",
+"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%)
+$width-arrow: 11px
+$height-arrow: 1px
+$color: #63C2B7
+#canvas
+ display: none
+ position: absolute
+@font-face
+ font-family: font
+ src: url("font.woff")
+.container
+ width: 160px
+ height: 43px
+.btn
+ width: 160px
+ 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
+ box-shadow: 2px 4px 10px -1px rgba(0, 0, 0, 0.37)
+ &::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: $color
+ -webkit-transition: all 300ms ease-out
+ z-index: 2
+ //font-size: 10px
+ &::before
+ opacity: 1
+ &::after
+ opacity: 1
+.arrow
+ position: absolute
+ width: $width-arrow
+ height: $height-arrow
+ background: white
+ top: 17px
+ left: 134px
+ transform: rotate(45deg)
+ z-index: 55
+ -webkit-transition: all 300ms ease-out
+ //pointer-events: none
+ &::before
+ content: ''
+ position: absolute
+ width: $width-arrow
+ height: $height-arrow
+ transform: rotate(-90deg)
+ background: white
+ top: 5px
+ left: 5px
+ -webkit-transition: all 300ms ease-out
+.btn
+ .txt
+ position: relative
+ left: -9px
+ &:hover
+ .arrow
+ background: $color
+ &::before
+ background: $color
\ No newline at end of file
projects / Animations.git / commitdiff