JSFiddle - React, Tailwind, and code Playground

by 3ch0

HTML

<div class="menu">
					<ul>
<li><a href="#" title="Label" class="button green">Главная</a></li>
<li><a href="#" title="Label" class="button white">Об игре</a></li>
<li><a href="#" title="Label" class="button black">Список серверов</a></li>
<li><a href="#" title="Label" class="button orange">Наша команда</a></li>
<li><a href="#" title="Label" class="button red">Донат</a></li>
</ul>
				</div>

CSS

.menu{
	position: absolute;
	margin: 0; /* Обнуляем значение отступов */
	padding: 4px; /* Значение полей */
	left: 150px;
}
.menu li {
	display: inline; /* Отображать как строчный элемент */
	margin-right: 5px; /* Отступ слева */
	font-size: 16px;
	font-family: "Arial";
	color: rgb(255, 255, 255);
	font-weight: bold;
	line-height: 1.2;
	width: 20%;
}

.button {
    cursor:pointer;
    display:block;
    height:70px;
    width:320px;
    line-height:70px;
    text-align:center;
    background-image:url('images/buttons.png');
    background-repeat:no-repeat;
}
.button.green { background-position:0 0 } /* зеленая кнопка */
.button.green:hover { background-position:0 -350px } /* активная зеленая