Показать сообщение отдельно
  #1 (permalink)  
Старый 08.08.2020, 09:46
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Как убрать рамку с автоблика?
Имеется кнопка с автобликом - 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; } }
Ответить с цитированием