Как изменить свойство стиля кнопки при наведении курсора? - PullRequest
Новая
       9

Как изменить свойство стиля кнопки при наведении курсора?

0 голосов
/ 20 февраля 2019

РЕДАКТИРОВАТЬ: мой веб-сайт можно найти на http://caconline.ca/.

В настоящее время я обновляю веб-сайт для школьного клуба с использованием Elementor на WordPress.По сути, я хочу добиться эффекта, который можно найти на кнопках на веб-сайте http://www.fleshbeauty.com. Когда вы наводите курсор на любую из кнопок с черной рамкой вокруг, вы можете увидеть светло-розовую теньэто немного подталкивает при наведении.Я пытаюсь добиться того же эффекта на веб-сайте моего школьного клуба, но в обратном порядке - поэтому обычная кнопка уже будет иметь красную заливку, и когда вы наводите курсор на кнопку, появится граница, которая немного отталкивается отbutton.

Одним из решений, которое я нашел до сих пор, было использование селектора ::before в пользовательском CSS, но Elementor не распознает его.

Так выглядит мой коддо сих пор: 

a.elementor-button-link.elementor-button.elementor-size-xl:hover {
z-index: -1;
border: 3px solid #000000;
margin: -10px -10px 10px 10px; }

И снова, я хочу, чтобы мой желаемый результат выглядел, но в обратном порядке:

Кнопка найдена на Flesh Beauty

Любая помощь приветствуется.Спасибо!

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Было бы лучше, если бы вы добавили html и css, вот что я понимаю из вашего вопроса. 

.button{padding:10px 35px; display:inline-block; background:none; border:1px solid #000; margin:30px; position:relative; color:#000; text-decoration:none; }
.button:before{background:pink; width:100%; height:100%; top:0; left:0; transform:translate(0px, 0px); content:''; position:absolute; z-index:-1; opacity:0; transition: all ease-in-out .5s;}
.button:hover:before{opacity:1;transform:translate(-10px, -10px);}
<a class="button" href="#">Explore</a>
0 голосов
/ 20 февраля 2019

Я не совсем уверен, что правильно вас понимаю.Но я пытался воссоздать то, что, как мне кажется, ты хотел.

button{
  background-color: #fdd;
  border: 0;
  position: relative;
  margin: 20px;
  padding: 10px;
}

button::after{
  content: ' ';
  position: absolute;
  display: static;
  top: 0px;
  left: 0px;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 2px solid #000;
  transition: 200ms;
}

button:hover::after{
  top: 5px;
  left: 5px;
  opacity: 1;
}

https://codepen.io/Lumnezia/pen/wNZvaZ

(также здесь есть другая версия, где текст будет перемещаться с границей, а также https://codepen.io/Lumnezia/pen/KJYKad)

Если у вас естьлюбые вопросы о том, как использовать :: after или :: before, не стесняйтесь оставлять комментарии.Код должен быть довольно простым, если у вас есть базовое понимание CSS.

...