Как я могу ограничить волновой эффект границей моей кнопки?

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

body { background-color: #ddd; }

.overknop {
    position: relative;
    
    border-radius: 0 50px 0 50px;
    border: 1px solid white;
    
    font-family: "Bebas Neue";
    font-size: 28px;
    
    color: #FFFFFF;
    color: black;
    
    padding: 20px;
    width: 200px;
    overflow: hidden;
    
    text-align: center;
    text-decoration: none;
    
    cursor: pointer;
      background-color: transparent;
    
    transition-duration: 0.4s;
}

.overknop::after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s;
}

.overknop:active::after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}

<button class = "overknop">OVER</button>

Правда не знаю как это сделать, в инете ничего про это не нашел

Мы не можем вам помочь, потому что вы не опубликовали HTML-код, используя свой overknop класс CSS (также вам действительно не следует использовать transition: all: вместо этого вы должны использовать явный список переходных свойств).

— 22.03.2022 09:27

``` <body> <button class = "overknop">OVER</button> </body> </html> ``` это действительно весь html

— 22.03.2022 09:32

html css

22.03.2022 09:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это прекрасно работает.

Вы должны были забыть использовать overflow:hidden в своем коде

.overknop {
  position: relative;
  border-radius: 0 50px 0 50px;
  border: 1px solid white;
  font-family: "Bebas Neue";
  font-size: 28px;
  color: #ffffff;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  background-color: transparent;
}

.overknop:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition-duration: 0.8s;
}
body {
  background-color: skyblue;
  text-align: center;
  margin-top: 30vh;
}
.overknop:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
}

<button class = "overknop">OVER</button>

волновой эффект все еще выходит из коробки, на самом деле это не ответило на мой вопрос

— 22.03.2022 09:38

Что значит "из коробки"? Если это граница кнопки, то это не для меня.

— 22.03.2022 09:40

Какой браузер вы используете?

— 22.03.2022 09:40

сафари, и да, я имел в виду за границу кнопки

— 22.03.2022 09:40

@Zenon Какая версия Safari? А macOS и/или iOS Safari? Он отлично отображается для меня в Chrome в Windows.

— 22.03.2022 09:44

кто-то отредактировал код, и теперь он работает! удивительно

— 22.03.2022 09:46

22.03.2022 09:37

Другие вопросы по теме

Медиа-запрос не работает с этим изображением?

Изменить стиль через флажок

Как сделать Javascript (матричный код дождя) фоном сайта

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

Бумажный компонент в пользовательском интерфейсе материала выходит за пределы фонового изображения

CSS Grid: как изменить поток сетки?

Масштаб SVG (отцентрируйте ориганы)

Предотвратить теневое кровотечение с помощью абсолютного элемента позиции?

Заполнение изображений HTML и CSS не работает

CSS Gradient пропускает цвета

Как я могу ограничить волновой эффект границей моей кнопки?

Ответы 1

Другие вопросы по теме

Похожие вопросы