<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/*=============================================
= Aqua-Themed Button Style =
= Glossy, glassy button effect =
=============================================*/
button {
/* --- Layout & Dimensions --- */
display: inline-block;
grid-row: 1;
height: 1.75em;
min-width: 6em;
padding: 0 2em;
line-height: 1.75em;
border-radius: 1000px; /* Fully rounded */
position: relative;
overflow: hidden;
box-sizing: border-box; /* Prevent layout overflow */
/* --- Typography --- */
font-size: 3rem; /* Controls button scale */
font-family: "Myriad Pro", system-ui, sans-serif;
font-weight: 600;
text-align: center;
letter-spacing: 0.0375em;
color: #fff;
text-transform: capitalize; /* Keeps consistent look */
cursor: pointer;
user-select: none; /* Prevents text highlighting on double-click */
/* --- Text Enhancement --- */
-webkit-text-stroke-width: 0.025em;
-webkit-text-stroke-color: #000;
text-shadow: 0 0.25em 0.2em rgba(30, 77, 161, 0.5);
z-index: 3;
/* --- Borders & Outline --- */
border: none;
outline: none;
appearance: none; /* Resets native OS button styles */
/* --- Aqua Gradient & Depth --- */
background: linear-gradient(
rgba(0, 65, 184, 0.625),
rgba(45, 115, 199, 0.625),
rgba(33, 160, 196, 0.625)
);
background-clip: padding-box;
/* --- Layered Shadows for Depth --- */
box-shadow:
0 0.375em 0.5em rgba(0, 0, 0, 0.3), /* Outer drop shadow */
0 0.125em 0.125em rgba(0, 78, 187, 0.5), /* Subtle blue hue */
inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8), /* Inner dark depth */
inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75); /* Soft internal glow */
/* --- Transitions --- */
transition:
box-shadow 0.2s ease,
transform 0.1s ease,
background 0.3s ease;
}
/*=============================================
= Hover, Focus & Active States =
= Adds glow, motion, and accessibility focus =
=============================================*/
button:hover {
filter: brightness(1.1); /* Slight hover glow */
}
button:focus-visible {
/* Use :focus-visible for accessibility (keyboard only) */
outline: 3px solid rgba(52, 106, 227, 0.6);
outline-offset: 2px;
}
button:active {
transform: translateY(1px); /* Subtle press effect */
box-shadow:
0 0.375em 0.5em rgba(0, 0, 0, 0.3),
0 0.125em 0.125em rgba(0, 78, 187, 0.5),
inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8),
inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75),
0 0 0.5em rgba(52, 106, 227, 0.5);
}
/*=============================================
= Disabled State =
= Visual indication & logical click blocking =
=============================================*/
button:disabled,
button[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(0.4);
box-shadow: none;
}
/*=============================================
= Top Shine =
= Adds glossy highlight for glass effect =
=============================================*/
button::before {
content: '';
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 0.875em);
height: 33%;
border-radius: 2em 2em 0.5em 0.5em;
z-index: 2;
background: linear-gradient(
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.3)
);
filter: blur(1px); /* Soften edges */
pointer-events: none; /* Prevent interference with clicks */
}
/*=============================================
= Bottom Glow =
= Adds subtle reflection and depth glow =
=============================================*/
button::after {
content: '';
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 1.25em);
height: 33%;
border-radius: 0.75em;
z-index: 1;
background: linear-gradient(
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.5)
);
filter: blur(3px);
pointer-events: none;
}
/*=============================================
= Reduced Motion Preference =
= Respects OS motion accessibility settings =
=============================================*/
@media (prefers-reduced-motion: reduce) {
button {
transition: none;
transform: none;
}
}
/*=============================================
= High Contrast Adjustment =
= Ensures readability in forced-color mode =
=============================================*/
@media (forced-colors: active) {
button {
background: ButtonFace;
color: ButtonText;
border: 1px solid ButtonText;
box-shadow: none;
}
button::before,
button::after {
display: none;
}
}
</style>
</head>
<body>
<button>Save</button>
</body>
</html>
/* Add your styles here */
// Add your code here