├── .gitattributes
├── index.css
└── index.html


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     margin: 0;
  3 |     height: 100vh;
  4 |     display: grid;
  5 |     grid-template-columns: repeat(3, 1fr);
  6 |     grid-template-rows: 1fr;
  7 | }
  8 | 
  9 | .background-one {
 10 |     background-color: #151515;
 11 | }
 12 | 
 13 | .background-two {
 14 |     background-color: #151515;
 15 | }
 16 | 
 17 | .background-three {
 18 |     background-color: #151515;
 19 | }
 20 | 
 21 | .link-container {
 22 |     display: flex;
 23 |     flex-direction: column;
 24 |     justify-content: center;
 25 |     align-items: center;
 26 |     height: 100%;
 27 |     position: relative;
 28 |     z-index: 0;
 29 | }
 30 | 
 31 | a {
 32 |     font-family: "Bungee", cursive;
 33 |     font-size: 2.5em;
 34 | }
 35 | 
 36 | .link-one {
 37 |     color: #53d9d1;
 38 |     transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
 39 |     line-height: 1em;
 40 | }
 41 | 
 42 | .link-one:hover {
 43 |     color: #111;
 44 |     transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);
 45 | }
 46 | 
 47 | .link-one::before {
 48 |     content: "";
 49 |     position: absolute;
 50 |     z-index: -1;
 51 |     width: 100%;
 52 |     height: 100%;
 53 |     top: 0;
 54 |     right: 0;
 55 |     background-color: #53d9d1;
 56 |     clip-path: circle(0% at 50% calc(50%));
 57 |     transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
 58 | }
 59 | 
 60 | .link-one:hover::before {
 61 |     clip-path: circle(100% at 50% 50%);
 62 | }
 63 | 
 64 | .link-one::after {
 65 |     content: "";
 66 |     position: absolute;
 67 |     z-index: -1;
 68 |     width: 100%;
 69 |     height: 100%;
 70 |     top: 0;
 71 |     right: 0;
 72 |     background-color: #151515;
 73 |     clip-path: polygon( 40% 0%, 60% 0%, 60% 0%, 40% 0%, 40% 100%, 60% 100%, 60% 100%, 40% 100%);
 74 |     transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
 75 | }
 76 | 
 77 | .link-one:hover::after {
 78 |     clip-path: polygon( 40% 10%, 60% 10%, 60% 35%, 40% 35%, 40% 90%, 60% 90%, 60% 65%, 40% 65%);
 79 | }
 80 | 
 81 | .link-two {
 82 |     color: #f27b9b;
 83 |     transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
 84 | }
 85 | 
 86 | .link-two:hover {
 87 |     color: #111;
 88 |     transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);
 89 | }
 90 | 
 91 | .link-two::before {
 92 |     content: "";
 93 |     position: absolute;
 94 |     z-index: -2;
 95 |     width: 100%;
 96 |     height: 100%;
 97 |     top: 0;
 98 |     right: 0;
 99 |     clip-path: polygon( 0% -20%, 100% -30%, 100% -10%, 0% 0%, 0% 130%, 100% 120%, 100% 100%, 0% 110%);
100 |     background-color: #f27b9b;
101 |     transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
102 | }
103 | 
104 | .link-two:hover::before {
105 |     clip-path: polygon( 0% 10%, 100% 0%, 100% 20%, 0% 30%, 0% 100%, 100% 90%, 100% 70%, 0% 80%);
106 | }
107 | 
108 | .link-two::after {
109 |     content: "";
110 |     position: absolute;
111 |     z-index: -1;
112 |     width: 5ch;
113 |     height: 5ch;
114 |     top: 50%;
115 |     right: 50%;
116 |     transform: translate(50%, -50%) rotate(0deg) scale(0);
117 |     transition: transform 1s ease;
118 |     background-color: #f27b9b;
119 | }
120 | 
121 | .link-two:hover::after {
122 |     transform: translate(50%, -50%) rotate(135deg) scale(1);
123 | }
124 | 
125 | .link-three {
126 |     color: #eb7132;
127 | }
128 | 
129 | .link-three::after {
130 |     content: "";
131 |     position: absolute;
132 |     z-index: 2;
133 |     width: 50%;
134 |     height: 100%;
135 |     top: 0%;
136 |     left: 0%;
137 |     transform: translate(0, -50%) scaleY(0);
138 |     transition: transform 1s ease;
139 |     mix-blend-mode: difference;
140 |     clip-path: polygon( 20% 60%, 100% 60%, 100% 40%, 20% 40%, 20% 0%, 60% 0%, 60% 20%, 20% 20%);
141 |     background-color: #eb7132;
142 | }
143 | 
144 | .link-three:hover::after {
145 |     transform: translate(0, 0%) scaleY(1);
146 | }
147 | 
148 | .link-three::before {
149 |     content: "";
150 |     position: absolute;
151 |     z-index: 2;
152 |     width: 50%;
153 |     height: 100%;
154 |     bottom: 0%;
155 |     right: 0%;
156 |     transform: translate(0, 50%) scaleY(0);
157 |     transition: transform 1s ease;
158 |     mix-blend-mode: difference;
159 |     clip-path: polygon( 80% 40%, 0% 40%, 0% 60%, 80% 60%, 80% 100%, 40% 100%, 40% 80%, 80% 80%);
160 |     background-color: #eb7132;
161 | }
162 | 
163 | .link-three:hover::before {
164 |     transform: translate(0%, 0%) scaleY(1);
165 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Document</title>
 9 |     <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
10 |     <link rel="stylesheet" href="index.css">
11 | </head>
12 | 
13 | <body>
14 |     <div class="background-one">
15 |         <div class="link-container">
16 |             <a class="link-one" href="#">Diferentes</a>
17 |         </div>
18 |     </div>
19 |     <div class="background-two link-container">
20 |         <a class="link-two" href="#">Efectos</a>
21 |     </div>
22 |     <div class="background-three link-container">
23 |         <a class="link-three" href="#">Links</a>
24 |     </div>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------