Javascript.RU

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

Как убрать рамку с автоблика?
Имеется кнопка с автобликом - 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; } }
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2020, 11:18
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 458

Так это наверное тень кнопки - свойство box-shadow (32 и 33 строки вашего кода).
Ответить с цитированием
  #3 (permalink)  
Старый 08.08.2020, 11:35
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 119

MC-XOBAHCK,
Нет, это не тень. Убрал - результат тот же.
Ответить с цитированием
  #4 (permalink)  
Старый 08.08.2020, 11:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,324

Смотрите свойство background класса .custom-btn
Неправильно понял о чем вы.

Последний раз редактировалось Nexus, 08.08.2020 в 11:45.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать подсветку при подсказке заполнения обязательной формы CSS? Espey Элементы интерфейса 13 25.06.2017 13:52
Как убрать скол при нажатии на пробел ? Sinie_Nebesa Общие вопросы Javascript 10 12.05.2017 17:10
Как убрать экраную лупу в моб.браузерах? g0xff Элементы интерфейса 1 21.12.2014 19:19
Как убрать курсор или изменить его на свой? PAMAC (X)HTML/CSS 4 19.01.2011 11:07
Как Убрать Click here if you have Flash Player 6 ? rentey Общие вопросы Javascript 3 19.03.2010 17:48