Мобильная версияЯ пытаюсь создать компонент, похожий на изображение.
Но я не могу найти способ стилизовать кнопку и этот блок в CSS. Что у меня есть сейчас.
.button { положение: относительное; дисплей: блок; фон: прозрачный; ширина: 390 пикселей; высота: 72 пикселей; высота строки: 80 пикселей; размер шрифта: 20 пикселей; текстовое оформление: нет; цвет: #1C1C21; поле: 40 пикселей авто; семейство шрифтов: Helvetica, Arial, без засечек; размер коробки: граница-коробка; } .button:перед, .button:после { позиция: абсолютная; содержание: ''; ширина: 390 пикселей; слева: 0; высота: 34 пикселей; z-индекс: 0; } .button:до { преобразование: перспектива (15 пикселей) RotateX (3 градуса); } .button:после { верх: 40 пикселей; преобразование: перспектива (15 пикселей) RotateX (-3 градуса); } /* Стиль рамки кнопки */ .button.border:перед, .button.border:после { граница: сплошная 1 пиксель #D0D0D8; } .button.border:до { нижняя граница: нет; /* чтобы граница не появлялась в середине фигуры */ } .button.border:после { граница-верх: нет; /* чтобы граница не появлялась в середине фигуры */ } .button-wrapper { дисплей: гибкий; flex-wrap: обертка; Нажмите на меня! Нажмите на меня! Нажмите на меня! Нажмите на меня!
Но это не похоже на то, что я хочу. Как мне сделать кнопку этого элемента и как я могу отобразить ее как на изображении и для мобильных устройств?
