button/index.html at master · Cosm0dust/button · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<button id="btn" class="button">

    <span id="text">Book meeting</span>

    <g id="group">
        <svg id="circle" width="281" height="80" viewBox="0 0 281 80" fill="none"
             xmlns="http://www.w3.org/2000/svg">
            <rect x="2" y="2" width="76" height="76" rx="38" stroke="url(#paint0_linear_824_1580)"
                  stroke-width="4">
                <animate calcMode="linear" restart="never" dur="600ms" attributeName="width" from="76"
                         to="277" fill="freeze" begin="plus_anim.end"></animate>
            </rect>


            <defs>
                <linearGradient id="paint0_linear_824_1580" x1="-14.8" y1="90.4" x2="98.4197" y2="-33.1485"
                                gradientUnits="userSpaceOnUse">
                    <stop stop-color="#3458E4"/>
                    <stop offset="0.415739" stop-color="#AF85EE"/>
                    <stop offset="0.643543" stop-color="#F59ADA"/>
                    <stop offset="1" stop-color="#FFC1CE"/>
                </linearGradient>
            </defs>
        </svg>
        <svg id="plus" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path transform-origin="50% 50%" transform="scale(1,1)" fill-rule="evenodd" clip-rule="evenodd"
                  d="M16 2C16 0.89543 15.1046 0 14 0C12.8954 0 12 0.89543 12 2V12H2C0.89543 12 0 12.8954 0 14C0 15.1046 0.89543 16 2 16H12V26C12 27.1046 12.8954 28 14 28C15.1046 28 16 27.1046 16 26V16H26C27.1046 16 28 15.1046 28 14C28 12.8954 27.1046 12 26 12H16V2Z"
                  fill="url(#paint0_linear_941_899)">
                <animateTransform restart="never" id="plus_anim" attributeName="transform" type="scale" from="1, 1"
                                  to="0, 0"
                                  begin="oval_svg.mouseover"
                                  dur="400ms"
                                  fill="freeze"/>
            </path>
            <defs>
                <linearGradient id="paint0_linear_941_899" x1="0" y1="28" x2="28" y2="0" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#AA83EE"/>
                    <stop offset="1" stop-color="#C48CE9"/>
                </linearGradient>
            </defs>
        </svg>

        <svg id="substract" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path id="substract_path" fill-rule="evenodd" clip-rule="evenodd"
                  d="M3.99063 1.59941C3.99063 0.936672 4.52789 0.399414 5.19063 0.399414C5.85338 0.399414 6.39063 0.936672 6.39063 1.59941V2.79941H13.5906V1.59941C13.5906 0.936672 14.1279 0.399414 14.7906 0.399414C15.4534 0.399414 15.9907 0.936672 15.9907 1.59941V2.79941H17.1907C18.5161 2.79941 19.5907 3.87393 19.5907 5.19941V17.1994C19.5907 18.5249 18.5161 19.5994 17.1907 19.5994H2.79063C1.46514 19.5994 0.390625 18.5249 0.390625 17.1994V5.19941C0.390625 3.87393 1.46514 2.79941 2.79063 2.79941H3.99063V1.59941ZM5.04932 11.5388L8.57121 14.9769C8.7828 15.1834 9.12587 15.1834 9.33748 14.9769L15.5685 8.89413C15.7801 8.68756 15.7801 8.35266 15.5685 8.14611L14.8023 7.39808C14.5907 7.19153 14.2476 7.19153 14.036 7.39808L8.95435 12.3588L6.58183 10.0427C6.37024 9.83617 6.02715 9.83617 5.81556 10.0427L5.04932 10.7908C4.83773 10.9973 4.83773 11.3323 5.04932 11.5388Z"
                  fill="url(#paint0_linear_824_1687)">
            </path>

            <defs>
                <linearGradient id="paint0_linear_824_1687" x1="0.367934" y1="17.4699" x2="22.7636" y2="3.99052"
                                gradientUnits="userSpaceOnUse">
                    <stop stop-color="#5158D6"/>
                    <stop offset="1" stop-color="#5A66E7"/>
                </linearGradient>
            </defs>
        </svg>


        <svg id="oval_svg" width="281" height="80" viewBox="0 0 281 80" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect opacity="0" id="oval" x="2" y="2" width="65" height="80" rx="1000" ry="1000"
                  stroke="url(#paint0_linear_824_1580)" stroke-width="7">
                <animate calcMode="linear" restart="never" dur="600ms" attributeName="width" from="65" to="278"
                         fill="freeze" begin="plus_anim.end"></animate>
                <animate values="0;1;0" keyTimes="0;0.5;1" fill="freeze" restart="never" attributeName="opacity"
                         from="0" to="1" dur="600ms" begin="plus_anim.end"></animate>
            </rect>

            <defs>
                <linearGradient id="paint0_linear_824_1580" x1="-14.8" y1="90.4" x2="98.4197" y2="-33.1485"
                                gradientUnits="userSpaceOnUse">
                    <stop stop-color="#3458E4"/>
                    <stop offset="0.415739" stop-color="#AF85EE"/>
                    <stop offset="0.643543" stop-color="#F59ADA"/>
                    <stop offset="1" stop-color="#FFC1CE"/>
                </linearGradient>
            </defs>
        </svg>
    </g>

    <span id="before_btn"></span>

</button>

<script src="script.js"></script>
</body>
</html>