Как убрать рамку с автоблика?
Имеется кнопка с автобликом - https://codepen.io/UnluckySerivelha/pen/xzGpRd
Но когда я делаю скругление кнопки (border-radius:50px) в момент пробегания блика виден край фона кнопки - https://prnt.sc/tw3sfe Как это устранить? КОД СО СКРУГЛЕНИЕМ: <a href="#anchor2" class="preview-block__btn custom-btn"><span>20</span></a> .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; } } |
Так это наверное тень кнопки - свойство box-shadow (32 и 33 строки вашего кода).
|
MC-XOBAHCK,
Нет, это не тень. Убрал - результат тот же. |
Неправильно понял о чем вы. |
Часовой пояс GMT +3, время: 06:57. |