- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Имеется кнопка с автобликом - https://codepen.io/UnluckySerivelha/pen/xzGpRd
Но когда я делаю скругление кнопки (border-radius:50px) в момент пробегания блика виден край фона кнопки - https://prnt.sc/tw3sfe
Как это устранить?
КОД СО СКРУГЛЕНИЕМ:
.custom-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 68px; height: 68px; padding-top: 2px; border-radius: 50px; border: none; border-bottom: 2px solid #E8340E; position: relative; font-size: 15px; font-weight: bold; color: #FFF; text-align: center; text-transform: uppercase; cursor: pointer; overflow: hidden; background: #fa4923; background: -webkit-gradient(linear, left top, right top, color-stop(25%, #fa4923), to(#ffbb00)); background: linear-gradient(to right, #fa4923 25%, #ffbb00); -webkit-box-shadow: 0px 9px 16px 0px rgba(250, 73, 35, 0.25); box-shadow: 0px 9px 16px 0px rgba(250, 73, 35, 0.25); -webkit-transition: ease 0.3s; transition: ease 0.3s; } .custom-btn:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fa4923; opacity: 0; z-index: 1; -webkit-transition: ease 0.3s; transition: ease 0.3s; } .custom-btn:after { content: ""; display: block; width: 30px; height: 300px; margin-left: 60px; background: #fff; position: absolute; left: -40px; top: -150px; z-index: 1; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.1s; transition: all 0.1s; -webkit-animation-name: slideme; animation-name: slideme; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-delay: 0.05s; animation-delay: 0.05s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes slideme { 0% { left: -30px; margin-left: 0px; } 30% { left: 110%; margin-left: 80px; } 100% { left: 110%; margin-left: 80px; } }Это, похоже, overflow: hidden так отрабатывает. Думаю, только убирать его у .custom-btn и добавлять в какой-то блок вокруг. У меня после этого рамка исчезла (ставил еще padding: 1px; ).