VVT_Internship/button.html at main · Layashree/VVT_Internship · 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
<html>
    <head>
        <style>
                body {
                margin:0;
                background-color:#191919;
                min-height:100vh;
                display:flex;
                align-items:center;
                justify-content:center;
                font-family:Helvetica,Sans-serif;
                }
                a {
                text-decoration:none;
                color:#FFF;
                }
                .rainbow-button {
                width:calc(20vw + 6px);
                height:calc(8vw + 6px);
                background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
                border-radius:5px;
                display:flex;
                align-items:center;
                justify-content:center;
                text-transform:uppercase;
                font-size:3vw;
                font-weight:bold;
                }
                .rainbow-button:after {
                content:attr(alt);
                width:20vw;
                height:8vw;
                background-color:#191919;
                display:flex;
                align-items:center;
                justify-content:center;
                }
                .rainbow-button:hover {
                animation:slidebg 2s linear infinite;
                }

                @keyframes slidebg {
                to {
                    background-position:20vw;
                }
                }
        </style>
    </head>
    <body>
       <a href="#" class="rainbow-button" alt="Button"></a>
    </body>
</html>