Открыть меню
Переключить меню настроек
Открыть персональное меню
Вы не представились системе
Ваш IP-адрес будет виден всем, если вы внесёте какие-либо изменения.

Шаблон:ModernButton/styles.css: различия между версиями

Материал из Star Horizon Wiki
Новая страница: «.modern-button { position: relative; display: flex; align-items: center; background: #1B263B; border: 1px solid #00D4FF; border-radius: 8px; padding: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; color: #FFFFFF; text-decoration: none; font-size: 14px; } .modern-button:hover { transform: scale(1.03); box-shadow: 0 0 10px rgba(0, 212, 255, 0.7); background: linear-gra...»
 
Нет описания правки
 
Строка 1: Строка 1:
.modern-button {
.modern-button {
    position: relative;
position: relative;
    display: flex;
display: flex;
    align-items: center;
width: 100%;
    background: #1B263B;
min-width: 45%;
    border: 1px solid #00D4FF;
min-height: 64px;
    border-radius: 8px;
overflow: hidden;
    padding: 10px;
box-shadow: var(--box-shadow-medium);
    overflow: hidden;
transition: all 0.1s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: var(--border-radius-high);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
}
}


.modern-button:hover {
.modern-button__image {
    transform: scale(1.03);
position: relative;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
display: flex;
    background: linear-gradient(to right, #1B263B, rgba(0, 212, 255, 0.2));
align-items: center;
padding: 4px;
}
}


.modern-button img {
.modern-button__content {
    width: 60px;
position: relative;
    margin-right: 10px;
display: flex;
    transition: transform 0.3s ease;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 100%;
font-size: var(--font-size-xs);
padding: 6px 10px;
box-sizing: border-box;
background: rgba(var(--color-darkened--rgb), 0.1);
}
}


.modern-button:hover img {
.modern-button__title {
    transform: rotate(5deg);
font-size: var(--font-size-giant);
line-height: 1;
font-family: var(--font-family-oswald);
}
}


.modern-button .text {
.modern-button__subtext {
    font-weight: 500;
font-size: var(--font-size-xs);
}
 
.modern-button .subtext {
    color: #D3D3D3;
    font-size: 12px;
}
}

Текущая версия от 09:34, 23 сентября 2025

.modern-button {
	position: relative;
	display: flex;
	width: 100%;
	min-width: 45%;
	min-height: 64px;
	overflow: hidden;
	box-shadow: var(--box-shadow-medium);
	transition: all 0.1s ease;
	border-radius: var(--border-radius-high);
}

.modern-button__image {
	position: relative;
	display: flex;
	align-items: center;
	padding: 4px;
}

.modern-button__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 100%;
	font-size: var(--font-size-xs);
	padding: 6px 10px;
	box-sizing: border-box;
	background: rgba(var(--color-darkened--rgb), 0.1);
}

.modern-button__title {
	font-size: var(--font-size-giant);
	line-height: 1;
	font-family: var(--font-family-oswald);
}

.modern-button__subtext {
	font-size: var(--font-size-xs);
}