Шаблон:ButtonPage/Button.css: различия между версиями
Материал из Celadon | Wiki Shiptest
Дополнительные действия
мНет описания правки |
мНет описания правки Метка: отменено |
||
| Строка 1: | Строка 1: | ||
.button { | .button { | ||
display: | display: flex; | ||
padding: | flex-direction: column; | ||
align-items: center; | |||
justify-content: center; | |||
padding: 10px; | |||
margin: 5px; | |||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
border-radius: | border-radius: 4px; | ||
cursor: pointer; | cursor: pointer; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
text-align: center; | |||
text-decoration: none; | |||
position: relative; | position: relative; | ||
overflow: hidden; | |||
} | } | ||
.button:hover { | .button:hover { | ||
background-color: #fff; | background-color: #fff; | ||
box-shadow: 0 0 | box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.8); | ||
border-color: #ffcc00; | border-color: #ffcc00; | ||
transform: translateY(-2px); | |||
} | } | ||
.button-img { | .button-img { | ||
margin-bottom: 8px; | |||
margin- | transition: all 0.3s ease; | ||
transition: | |||
} | } | ||
.button-img:hover { | .button-img:hover { | ||
transform: scale(1.1); | transform: scale(1.1); | ||
filter: drop-shadow(0 0 | filter: brightness(1.2) drop-shadow(0 0 3px rgba(255, 215, 0, 0.6)); | ||
} | } | ||
.button-text { | .button-text { | ||
text- | font-weight: bold; | ||
transition: all 0.2s ease; | |||
} | |||
.button-text:hover { | |||
color: #202122; | |||
text-shadow: 0 0 2px rgba(255, 215, 0, 0.5); | |||
} | } | ||
Версия от 02:08, 1 сентября 2025
.button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
margin: 5px;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
text-decoration: none;
position: relative;
overflow: hidden;
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.8);
border-color: #ffcc00;
transform: translateY(-2px);
}
.button-img {
margin-bottom: 8px;
transition: all 0.3s ease;
}
.button-img:hover {
transform: scale(1.1);
filter: brightness(1.2) drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}
.button-text {
font-weight: bold;
transition: all 0.2s ease;
}
.button-text:hover {
color: #202122;
text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
}