С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 07.06.2016
Сообщений: 78
1

Как убрать рамку с автоблика?

08.08.2020, 09:53. Показов 781. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Имеется кнопка с автобликом - https://codepen.io/UnluckySerivelha/pen/xzGpRd

Но когда я делаю скругление кнопки (border-radius:50px) в момент пробегания блика виден край фона кнопки - https://prnt.sc/tw3sfe

Как это устранить?

КОД СО СКРУГЛЕНИЕМ:

HTML5
1
<a href="#anchor2" class="preview-block__btn custom-btn"><span>20</span></a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.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; } }
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
08.08.2020, 09:53
Ответы с готовыми решениями:

Как убрать рамку
Подскажите пожалуйста как убрать вот эту рамку? &lt;option selected disabled&gt;1&lt;/option&gt; ...

Как убрать рамку?
как убрать эту рамку с формы ?

Как убрать рамку у кнопок
В браузерах Яндекс и Опера, появляется рамка, когда кнопка нажата, как убрать эту синею рамку?...

как убрать рамку страници
Всем доброго времени суток. Подскажите, что я делаю не так. У меня есть php страничка с кодом ...

4
1795 / 943 / 383
Регистрация: 26.11.2014
Сообщений: 1,927
Записей в блоге: 1
08.08.2020, 10:37 2
Может тени стереть...) box-shadow
0
0 / 0 / 0
Регистрация: 07.06.2016
Сообщений: 78
08.08.2020, 10:47  [ТС] 3
NTHing, Нет, это не тень. Убрал - результат тот же
0
1795 / 943 / 383
Регистрация: 26.11.2014
Сообщений: 1,927
Записей в блоге: 1
08.08.2020, 11:19 4
Может border-bottom виноват... Или я не понимаю о чём идёт речь...((
0
0 / 0 / 0
Регистрация: 07.06.2016
Сообщений: 78
08.08.2020, 14:03  [ТС] 5
NTHing, border-bottom не причем.
убрал position: relative; из .custom-btn и рамка исчезла
0
08.08.2020, 14:03
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
08.08.2020, 14:03
Помогаю со студенческими работами здесь

Как убрать рамку в заокругленой кнопке?
#b1{ font-size:43.78pt; color:#fff; background-color:#8b8b8b; ...

Как убрать рамку с area и map
Есть сайт, на нём решил использовать map Но вот в чём незадача, в IE лезет рамка, пытался...

Как в Bootstrap 3 убрать рамку в navbar в Less?
Добрый день, Запарился с css правилами для разметки: .navbar* { border:none ...

Как убрать ненужную рамку с ссылки???
При нажатии на ссылку, после возврата обратно на страничку, видна рамка которая выходит за границы...

Как убрать пунктирную рамку вокруг ссылки
Как убрать пунктирную рамку вокруг ссылки ?

Как убрать рамку для атрибута alt ?
Если картинка ещё не загрузилась, то показывается содержимое атрибута alt, но браузер Chrome...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Что такое HCL Notes и как с ним работать
InfoMaster 10.01.2025
HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .
Как работать с Git из Windows и Visual Studio
InfoMaster 10.01.2025
Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python
InfoMaster 10.01.2025
Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .
Отличия абстрактного класса от интерфейса
InfoMaster 10.01.2025
В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .
Как работать в Git
InfoMaster 10.01.2025
Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .
Реализация передвижения персонажа в Unity3d на C#
InfoMaster 10.01.2025
Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .
Docker: руководство для начинающих
InfoMaster 10.01.2025
В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
InfoMaster 08.01.2025
NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .
Что такое Null Pointer Exception (NPE) и как это исправить?
InfoMaster 08.01.2025
Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .
Русский язык в консоли C++
InfoMaster 08.01.2025
При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C#
InfoMaster 08.01.2025
Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru