study-Point/test.html at main · arcentix/study-Point · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <style>
      #button-88 {
        margin: 5px;
        padding: 8px 15px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        display: block;
        border: 0px;
        font-weight: 700;
        box-shadow: 0px 0px 14px -7px #f09819;
        background-image: linear-gradient(
          45deg,
          #9b9292 0%,
          #ff0000 51%,
          #000000 100%
        );
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      #button-88:hover {
        background-position: right center;
        /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
      }

      #button-88:active {
        transform: scale(0.95);
      }
    </style>
  </head>
  <body>
    <button id="button-88" role="button">Button 87</button>
    <button class="button-87" role="button">Button 87</button>
  </body>
</html>