Anonymous
Как сделать эти кнопки более симпатичными? Я абсолютно ничего не знаю о CSS и коде в целом.
Сообщение
Anonymous » 27 ноя 2024, 09:12
Это мой 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
1732687939
Anonymous
Это мой CSS [code]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); } [/code] Кнопки выглядят слишком скучно, и я изо всех сил пытаюсь сделать их блестящими, чтобы они не выглядели как кнопки iOS 2009 года. Я попробовал спросить ChatGPT, но у меня хватило ума морально подготовиться к разочарованию, так что, к счастью, я все еще в здравом уме. Подробнее здесь: [url]https://stackoverflow.com/questions/79229117/how-can-i-make-these-buttons-look-cuter-i-know-absolutely-zero-about-css-and-co[/url]