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

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

0 голосов
/ 03 февраля 2020

Я хочу изменить цвет фона шрифта при наведении на текст кнопки и значка. 

body {
  background-color: black;
}

.button {
  background-color: white;
  border: 2px solid transparent;
  border-radius: 2em;
  color: #eff6f9;
  display: inline-block;
  font-family: Merriweather, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  transition: background-color 0.125s ease-in;
  margin-top: 3em;
}

.button a {
  font-size: 2em;
  text-decoration-line: none;
  color: black;
  text-decoration: none
}

.button:hover,
.button:focus,
.button:active {
  background-color: transparent;
  border-color: white;
  color: white;
}

.shop:hover>span,
.shop:focus>span,
.shop:active>span {
  color: white;
}

a:focus,
.button a:hover {
  text-decoration: none;
}
<body>
<div class="button" id="bu">
  <a class="shop" href="https://app.nmpl.store/">
    <span>Order Now</span>
    <i class="fas fa-shopping-cart"></i>
  </a>
</div>

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

enter image description here

указатель вне кнопки

enter image description here

Указатель по краю кнопки

enter image description here

Указатель по тексту

Ответы [ 3 ]

1 голос
/ 03 февраля 2020

Действительно хороший пример того, почему важно использовать правильные элементы для правильной работы. Не используйте div, где они вам не нужны.

Избавьтесь от div и используйте простой элемент ссылки, который вы стилизуете, чтобы выглядеть как ваша кнопка. 

body {
  background-color: black;
}

.button {
  background-color: white;
  border: 2px solid transparent;
  border-radius: 2em;
  display: inline-block;
  font-family: Merriweather, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  transition: background-color 0.125s ease-in;
  margin-top: 3em;
  text-decoration-line: none;
  text-decoration: none;
  color: black;
}


.button:hover,
.button:focus,
.button:active {
  background-color: transparent;
  border-color: white;
  color: white;
}

a:focus {
  text-decoration: none;
}
<a class="button" href="https://app.nmpl.store/">
  <span>Order Now</span>
  <i class="fas fa-shopping-cart"></i>
</a>
0 голосов
/ 03 февраля 2020

Я только что изменил пару вещей в вашем коде: HTML

<body>
    <div id="bu">
    <a class="shop button" href="https://app.nmpl.store/">
        Order Now <i class="fas fa-shopping-cart"></i>
    </a>
</div>

CSS

body {
   background-color: black;
}

.button {
   background-color: white;
   border: 2px solid #FFF;
   border-radius: 35px;
   color: #000;
   display: inline-block;
   font-family: Merriweather, Arial, sans-serif;
   font-weight: 300;
   font-style: italic;
   font-size: 15px;
   font-weight: bold;
   letter-spacing: 1px;
   line-height: 1;
   text-decoration:none;
   padding: 20px 30px;
   text-shadow: none;
   transition: background-color 0.125s ease-in;
   margin-top: 3em;
}

.button:hover,
.button:focus,
.button:active {
    background-color: transparent;
    border-color: white;
    color: white;
}

Надеюсь, это поможет вам:)

0 голосов
/ 03 февраля 2020

Попробуйте приведенный ниже фрагмент. В этом я изменил 

.shop:hover>span,
.shop:focus>span,
.shop:active>span {
  color: white;
}

На 

.shop:hover>a>span,
.shop:focus>a>span,
.shop:active>a>span {
  color: white;
}


.button {
  background-color: white;
  border: 2px solid transparent;
  border-radius: 2em;
  color: #eff6f9;
  display: inline-block;
  font-family: Merriweather, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  transition: background-color 0.125s ease-in;
  margin-top: 3em;
}

.wrapper{
  height:200px;
  width:200px;
  padding:10px;
  background-color:yellow;
}

.button a {
  font-size: 2em;
  text-decoration-line: none;
  color: black;
  text-decoration: none
}

.button .fa-w-18 {
  color: black;
  margin-left: 5px;
}

.button:hover,
.button:focus,
.button:active {
  background-color: transparent;
  border-color: white;
  color: white;
}

.shop:hover>.fa-w-18,
.shop:focus>.fa-w-18,
.shop:active>.fa-w-18 {
  color: white;
}

.button:hover>a>span,
.button:focus>a>span,
.button:active>a>span {
  color: white;
}

a:focus,
.button a:hover {
  text-decoration: none;
}
<div class="wrapper">
  <div class="button" id="bu">
    <a class="shop" href="https://app.nmpl.store/">
      <span>Order Now</span>
      <i class="fas fa-shopping-cart"></i>
    </a>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...