<button class="medieval-button">Press Me</button>
.medieval-button {
padding: 10px 20px;
background-color: #795649; /* A dark wood-like brown */
color: #f4e5c3; /* A parchment-like off-white */
border: 2px solid #c0a080; /* A lighter brown border */
font-family: 'Goudy Bookletter 1911', serif; /* A font with an old-style feel */
font-size: 18px;
text-shadow: 1px 1px 0px #a67c52; /* Gives a bit of depth to the text */
box-shadow: 2px 2px 0px #a67c52; /* Simulates an inset look */
border-radius: 4px; /* Slightly rounded corners */
cursor: pointer;
transition: all 0.3s ease;
}
.medieval-button:hover {
background-color: #8a6e2f; /* A lighter, worn wood color for hover */
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); /* A more pronounced shadow for hover */
}
.medieval-button:active {
box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.5); /* An inset shadow for a pressed effect */
transform: translateY(2px); /* Moves the button down to simulate a press */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.