Держите псевдоэлемент между фоном и основным контентом

Я делаю кнопки с помощью тега привязки. Я хочу произвести эффект, но он работает не так, как ожидалось. псевдоэлемент обтекает кнопку, также скрывается текст. Но я хочу что-то вроде этого, псевдоэлемент будет между кнопкой и фоном.

section {
  padding: 80px 0;
}

section.one {
  background: #76B39D;
}

.button {
  color: white;
  margin: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.button-type-1 {
  border: 2px solid #fff;
  padding: 10px 33px;
  overflow: hidden;
  position: relative;
}

.button-type-1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  z-index: 0;
  transition: all 0.4s ease;
}

.button-type-1:hover:after {
  width: 200px;
  height: 200px;
}

.button-type-1:hover,
.button-type-1:focus {
  text-decoration: none;
}

<section class = "one">
  <a href = "" class = "button button-type-1">read</a>
</section>

Мне нравится, что фон псевдоэлемента будет соответствовать размеру кнопки при наведении курсора. И текст кнопки также будет виден, но я думаю, что где-то испортился z-index или что-то еще.

html css

06.05.2018 19:36

Улучшение производительности загрузки с помощью 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

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

z-index 1 ваш родственник .button-type-1 и -1 псевдо :after.
Также сделайте кнопку inline-block, чтобы предотвратить переполнение элемента :after.

section {
  padding: 80px 0;
}

section.one {
  background: #76B39D;
}

.button {
  color: white;
  margin: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.button-type-1 {
  border: 2px solid #fff;
  padding: 10px 33px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  z-index:1;
}

.button-type-1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.4s ease;
}

.button-type-1:hover:after {
  width: 200px;
  height: 200px;
}

.button-type-1:hover,
.button-type-1:focus {
  text-decoration: none;
  color:#000;
}

<section class = "one">
  <a href = "" class = "button button-type-1">read</a>
</section>

C. Это нормально, но псевдоэлемент не должен выходить за пределы области кнопки.

— 06.05.2018 20:05

@Hudai, чем добавить inline-block на свою кнопку. См. Обновленный ответ.

— 06.05.2018 20:20

@Hudai Вам нужно установить display: inline-block; на .button-type-1 элемент jsfiddle.net/SamJakob/ezbycfdz/1

— 06.05.2018 20:22

06.05.2018 19:57

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

Задержка продолжительности перехода после наведения на Div

Flexbox - изображение и контент

Необходимо различать bootbox.alert () и bootbox.confirm (), оба стиля модального окна на одной странице

Странное позиционирование изображений (HTML, CSS, Bootstrap)

Шаблон Js Live Search

Удалите лишние пробелы между картами в колоде карт

Стили и скрипты сломаны в файле jsp

Angularjs ng-repeat проблема

Почему мой index.html не помещает мой style.css в мою папку css?

Дублирование и преобразование ионного ввода при нажатии?

Держите псевдоэлемент между фоном и основным контентом

Ответы 1

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

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