Button script test

.test-1 {

```
   position: relative;
   background: transparent;
   width: 175px;
   height: 60px;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 1.5em;
   letter-spacing: 0.1em;
   font-weight: 400;
   padding: 10px 30px;
   transition: 0.5s;
   background-repeat: no-repeat;
   background-position: 200% center;

```

}
.test-1:hover {

```
   background: var(--clr);
   color: var(--clr);
   letter-spacing: 0.25em;
   box-shadow: 0 0 35px var(--clr);

```

}
.test-1::before {

```
   content: *;*
   position: absolute;
   inset: 2px;
   background: transparent;

```

}
.test-1 span:first-of-type {

```
   position: relative;
   z-index: 1;

```

}
.test-1 i {

```
   position: absolute;
   inset: 0;
   display: block;

```

}
.test-1 i::before {

```
   content: *;*
   position: absolute;
   top: -15px;
   left: 80%;
   width: var(--hex-size);
   height: var(--hex-size);
   background: transparent;
   transform: translateX(-50%);
   transition: 0.5s;
   background-color: var(--clr);
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%236fff' stroke-width='10' fill='none' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%236fff' stroke-width='10' fill='none' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");

```

}
.test-1:hover i::before {

```
   left: 20%;
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%23fff' stroke-width='10' fill='%23fff' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%23fff' stroke-width='10' fill='%23fff' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");

```

}
.test-1 i::after {

```
   content: *;*
   position: absolute;
   bottom: -15px;
   left: 20%;
   width: var(--hex-size);
   height: var(--hex-size);
   background: transparent;
   transform: translateX(-50%);
   transition: 0.5s;
 background-color: var(--clr);
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%236fff' stroke-width='10' fill='none' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%236fff' stroke-width='10' fill='none' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");

```

}
.test-1:hover i::after {

```
   left: 80%;
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%23fff' stroke-width='10' fill='%23fff' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%23fff' stroke-width='10' fill='%23fff' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");

```

}

.your-class{

```
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='width:30px%3B' xml:space='preserve'%3E%3Cpath stroke='%23fff' stroke-width='10' fill='%23fff' d='M25.045 128 256 0l230.955 128v256L256 512 25.045 384z'/%3E%3C/svg%3E");

```

}