Часть 1. Узнайте, как использовать позиционирование CSS и flexbox
В этой статье мы собираемся создать плавающую кнопку действия (FAB) с помощью чистого CSS. Мы будем использовать различные варианты позиционирования CSS для создания этого FAB, такие как fixed и absolute.
Во-первых, мы добавляем ‹div› с несколькими словами внутри него. Мы также вставляем CDN fontawesome.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div>some text</div> </body> </html>
Добавьте большую кнопку
Теперь нам нужно создать большую кнопку внизу справа. Итак, мы добавляем следующие ‹div›.
Под предыдущим ‹div›. мы добавляем ‹div class="fab-container"›, который будет обертывать все кнопки. Мы хотим расположить все эти вещи в правом нижнем углу страницы.
<body> <div>some text</div> <div class="fab-container"> <div class="button iconbutton"> <i class="fa-solid fa-plus"></i> </div> </div> </body>
потрясающий контейнер
Итак, мы добавляем правила CSS, устанавливаем фиксированное положение, 50 пикселей снизу и 50 пикселей справа. Добавьте курсор: указатель, чтобы он выглядел как кнопка.
.fab-container{
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
}
кнопка со значком
Затем мы добавляем ‹div class="button iconbutton"›, чтобы обернуть иконку шрифтового плюса.
iconbutton состоит в том, чтобы создать кнопку круглого значка розового цвета с тенью под ней.
button заключается в создании кнопки большего размера, чтобы позже пользователь мог активировать все параметры, нажав на эту большую кнопку «+».
.iconbutton{
width:50px;
height:50px;
border-radius: 100%;
background: #FF4F79;
box-shadow: 10px 10px 5px #aaaaaa;
}
.button{
width:60px;
height:60px;
background:#A11692;
}
Отцентрируйте значок
Вы можете видеть, что большая кнопка создана правильно, но символ «+» находится не в центре. Нам нужно отцентрировать его, добавив следующие правила CSS. Мы также устанавливаем цвет текста как белый.
.iconbutton i{
display:flex;
align-items:center;
justify-content:center;
height: 100%;
color:white;
}
Добавить список опций
Под большой кнопкой добавляем список опций. Мы снова используем ‹div› с классом «iconbutton», чтобы обернуть все значки. Мы также добавляем метки рядом с каждой кнопкой.
<ul class="options"> <li> <span class="btn-label">telegram</span> <div class="iconbutton"> <i class="fa-brands fa-telegram"></i> </div> </li> <li> <span class="btn-label">instagram</span> <div class="iconbutton"> <i class="fa-brands fa-instagram"></i> </div> </li> <li> <span class="btn-label">twitter</span> <div class="iconbutton"> <i class="fab fa-twitter"></i> </div> </li> <li> <span class="btn-label">facebook</span> <div class="iconbutton"> <i class="fab fa-facebook"></i> </div> </li> </ul>
Сделайте большую кнопку внизу
Чтобы сделать большую кнопку внизу, мы можем убрать список опций из обычного потока, добавив position:absolute .
Затем мы удаляем весь стиль списка, чтобы не было маркеров. Наконец, установите его на 70 пикселей снизу.
list-style-type: none; position:absolute; bottom:70px;
Этикетки
Вы можете видеть метки над каждой кнопкой со значком. Мы хотим расположить их рядом и поместить все элементы в конец каждого ряда.
Итак, мы добавляем следующий стиль
.options li{
display:flex;
justify-content:flex-end;
padding:5px;
}
flex-end: элементы упаковываются ближе к концу flex-направления
Теперь метки и кнопки расположены рядом. Однако список скудный с правой стороны, и часть его уже вышла за пределы экрана.
Итак, нам нужно перейти к добавлению правила в разделе параметров в файле CSS.
.options{
list-style-type: none;
position:absolute;
bottom:70px;
right:0;
}
Установите правый край позиционированного элемента ‹div› на 0 пикселей слева от правого края его ближайшего позиционированного предка.
Теперь список опций находится в правильном месте.
Стиль ярлыка
Мы можем продолжить стиль этикетки. Добавьте 2 пикселя по вертикали и 5 пикселей по горизонтали. Добавьте отступ в 10 пикселей справа, чтобы между кнопкой и меткой оставалось пространство.
Выровняйте себя по центру, чтобы он был выровнен вертикально по центру кнопки. Сделайте user-select равным none, чтобы текст нельзя было скопировать.
Установите черный цвет фона и белый цвет текста. Установите радиус границы на 3 пикселя и добавьте немного тени под ней.
.btn-label{
padding:2px 5px;
margin-right:10px;
align-self: center;
user-select:none;
background-color: black;
color:white;
border-radius: 3px;
box-shadow: 10px 10px 5px #aaaaaa;
}
Дополнительные материалы на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.
