Как сделать эти кнопки более симпатичными? Я абсолютно ничего не знаю о CSS и коде в целом. ⇐ CSS

[Anonymous]

Это мой CSS

Код: Выделить всё

body {
background-image: url("https://raw.githubusercontent.com/SacredJujucc/PDP-/main/tumblr_n2lblh8bv61rps1iho1_1280.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0;
height: 100vh;
font-family: "Fredoka", sans-serif;
color: #fefaf9;
overflow: hidden;
}

h1 {
font-family: "Fredoka", sans-serif;
font-size: 4.5em;
margin: 0;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
position: absolute;
top: 12.5%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}

.container {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-items: center;
white-space: nowrap;
}

.button {
background-color: #b37cc4;
color: #fefaf9;
font-size: 1.5em;
padding: 20px 0px;
border: none;
cursor: pointer;
border-radius: 20px;
transition: all 0.2s ease;
text-transform: uppercase;
width: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background: linear-gradient(-2deg, #8467b5, #eab3ff);
box-shadow: -1px 1px 10px rgba(21, 1, 64, 0.7),
inset 0px -2px 10px rgba(249, 235, 255, 0.4);
}

.button:hover {
background-color: #7b63a8;
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(21, 1, 64, 0.5),
inset 0 0 15px rgba(21, 1, 64, 0.2);
}

Кнопки выглядят слишком скучно, и я изо всех сил пытаюсь сделать их блестящими, чтобы они не выглядели как кнопки iOS 2009 года.
Я попробовал спросить ChatGPT, но у меня хватило ума морально подготовиться к разочарованию, так что, к счастью, я все еще в здравом уме.

Подробнее здесь: https://stackoverflow.com/questions/792 ... css-and-co