#css
Вопрос:
Мне нужен параметр, который соответствует содержимому before внутри самой кнопки .Приведенный ниже код делает содержимое before потоком за пределами самой кнопки. что я должен сделать, чтобы удержать его внутри кнопки…………………………………………………………………………………………………………………………………………………… ===================================================
button { padding: 0.9em 2em; border: 2px solid #17C3B2; position: absolute; background-color: transparent; text-align: center; text-transform: uppercase; font-size: 16px; color: #ddd; transition: .3s; display: block; font-family: inherit; color: #17C3B2; z-index: 1; } button::before { overflow: hidden; content: ''; width: 0; height: 100%; position: absolute; top: 50%; left: 50%; background: #17C3B2; transition: .5s ease; display: block; z-index: ; } button span { position: absolute; left: 0; top: 0; width: 10%; height: 10%; background: transparent; z-index: 1; } button span::before { content: ""; display: block; position: absolute; width: 8%; height: 500%; background: var(--lightgray); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-60deg); transition: all 0.3s; } button:hover::before { position: absolute; transform: translate(-50%, -50%) rotate(44deg); width: 100%; } button:hover { color: #111; } lt;buttongt;hover me lt;spangt;lt;/spangt; lt;/buttongt; Ответ №1:
я добавил overflow: hidden; к button и z-index: -1; к button:hover::before
button { padding: 0.9em 2em; border: 2px solid #17C3B2; position: absolute; background-color: transparent; text-align: center; text-transform: uppercase; font-size: 16px; color: #ddd; transition: .3s; display: block; font-family: inherit; color: #17C3B2; z-index: 1; overflow: hidden; } button::before { overflow: hidden; content: ''; width: 0; height: 100%; position: absolute; top: 50%; left: 50%; background: #17C3B2; transition: .5s ease; display: block; z-index: ; } button span { position: absolute; left: 0; top: 0; width: 10%; height: 10%; background: transparent; z-index: 1; } button span::before { content: ""; display: block; position: absolute; width: 8%; height: 500%; background: var(--lightgray); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-60deg); transition: all 0.3s; } button:hover::before { position: absolute; transform: translate(-50%, -50%) rotate(44deg); width: 100%; z-index: -1; } button:hover { color: #111; } lt;buttongt;hover me lt;spangt;lt;/spangt; lt;/buttongt; Комментарии:
1. Привет, мне непонятно, каким вы хотите видеть конечный результат. Что должно быть повернуто? Только цвет фона предыдущей или всей кнопки или…? Запуск вашего фрагмента фона «полоса» содержится в кнопке при наведении курсора, поэтому я не понимаю проблемы.
2. Я хочу вращать кнопки после поля, как минутную стрелку на настенных часах. Я получил результат от кого-то из той же группы. Я просто пытаюсь разработать еще несколько кнопок, и я столкнулся с этой проблемой. Честно говоря, я новичок в этом деле. Так что натыкаюсь на несколько вещей