cssbatch2/l12buttoneffect.html at master · dalechris45/cssbatch2 · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Rotating Button Effect</title>
        <style type="text/css">

            body{
                height: 100vh;
                font-family: sans-serif;

                display: flex;
                justify-content: center;
                align-items: center;

                margin:0;
                overflow: hidden;
            }

            a{
                text-decoration: none;
                color:#444;
                font-size: 45px;
                border: 5px solid #444;
                        /* top&bottom  left&right */
                padding: 40px 80px;

                position: relative;

                overflow: hidden;
            }

            /* pseudo element (::) */

            /* a::before{
                content: 'Hay';
            } */

            /* a::after{
                content: 'Bye';
            } */

            a::before{
                content: '';

                width: 100%;
                height: 100%;

                background-color: yellow;

                position: absolute;
                left:0;
                top:0;

                /* default value 0 */
                z-index: -1;

                transform: rotate(90deg);
                transform-origin: right top;

                /* transform: rotate(90deg);
                transform-origin: right bottom; */

                /* transform: rotate(-90deg);
                transform-origin: left bottom; */

                /* transform: rotate(90deg);
                transform-origin: left top; */

                transition: all 1s;
            }

            a:hover::before{
                transform: rotate(0deg);
            }

        </style>
    </head>

    <body>

        <a href="#">Hover Me</a>
        <!-- <a href="javascript:void(0)">Hover Me</a> -->

    </body>
</html>