• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать кнопки переключатели сайта на CSS (Делаем самостоятельно кнопки переключатели для сайта)
Создать кнопки переключатели сайта на CSS
Kosten
Дата: Воскресенье, 2019-03-24, 16:57 | Сообщение 1
Администраторы
Сообщений:20795
Награды: 56


Иногда нам нужно сделать оригинальные кнопки, которые не идут системные, а ставятся под функций, где происходит переключение. И здесь как раз все очень просто по дизайн выставить оригинальные кнопки и сделать им нумерацию. Но а где можно их применить, это там, где не поставишь стандартные, а здесь выставил свои оригинальные.



Приступаем:

HTML

Код
<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
        </ul>

CSS

Код
li:nth-child(n+3):nth-last-child(n+8){
    color:white;
    background-color:#4BB1CF;
}
ul{
    margin:50px;
    padding:0;
    list-style:none;
}
li{
    float:left;
    width:50px;
    height:50px;
    margin-bottom:20px;
    margin-right:20px;
    border-radius:10px;
    background:#eee;
    border:1px solid #ddd;
    cursor:pointer;
    text-align:center;
    line-height:50px;
    font-size:20px;
    font-family:"Tahoma", sans-serif;
    box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
}

Демонстрация
Прикрепления: 5050776.png(5.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать кнопки переключатели сайта на CSS (Делаем самостоятельно кнопки переключатели для сайта)
  • Страница 1 из 1
  • 1
Поиск: