Css test

Twst

Explore My Series

<div class="single-button-container">

<a href="https://example.com" target="_blank" class="single-button">Explore My Series</a>

</div>

<style>

.single-button-container {

text-align: center; /* centers the button horizontally */

margin: 40px 0; /* spacing from top and bottom */

}

.single-button {

display: inline-block;

padding: 12px 28px;

font-family: 'Georgia', serif;

font-size: 16px;

font-weight: bold;

color: #fff;

background: #000;

border: 2px solid #fff;

border-radius: 8px;

text-decoration: none;

position: relative;

cursor: pointer;

user-select: none; /* non-selectable text */

overflow: hidden;

transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;

}

.single-button:hover {

transform: scale(1.05);

box-shadow: 0 0 12px rgba(255,255,255,0.4);

color: #9b59b6; /* violet/purple glow on hover */

}

/* Shine effect */

.single-button::before {

content: "";

position: absolute;

top: 0;

left: -75%;

width: 50%;

height: 100%;

background: linear-gradient(

120deg,

transparent,

rgba(255, 255, 255, 0.3),

transparent

);

transform: skewX(-25deg);

}

.single-button:hover::before {

animation: shine 0.9s forwards;

}

@keyframes shine {

100% { left: 125%; }

}

</style>