Блог

Главная - Вопросы по программированию - Нужна помощь в настройке этой кнопки и работе с CSS и HTML

Нужна помощь в настройке этой кнопки и работе с CSS и HTML

#javascript #html #css

Вопрос:

—Изо всех сил пытаюсь понять, почему кнопка не отображается на моем веб-сайте — — Я пытаюсь получить анимированную кнопку для изменения анимации, когда моя мышь зависает над ней-Я буду беспокоиться о том, чтобы связать кнопку с чем-то в другое время, но я имею в виду, например, если бы я хотел связать ее с твиттером или чем-то еще, как бы я это сделал?—

 button {
  min-width: 120px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: .1px;
  outline: none;
  border:none;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #f7f7f7;
  background-color: transparent;
  color: #000;
  transition: all 200ms ease-in-out;
}

button :hover {
  transform: scale(1.1);
  background-color: #f7f7f7;
  color: #a22274;
  font-weight: bold;
  box-shadow: 0 0 0 2px #a22274;
  letter-spacing: 1.1px;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

button :active {
  transform: scale(1);
} 
 <button>Example</button>

Ответ №1:

в селекторах css не может быть пробелов, поэтому

 button :hover //wrong
button:hover // right
 
 button {
  min-width: 120px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: .1px;
  outline: none;
  border:none;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #f7f7f7;
  background-color: transparent;
  color: #000;
  transition: all 200ms ease-in-out;
  margin: 0 5px;
}

button:hover {
  transform: scale(1.1);
  background-color: #f7f7f7;
  color: #a22274;
  font-weight: bold;
  box-shadow: 0 0 0 2px #a22274;
  letter-spacing: 1.1px;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

button:active {
  transform: scale(1);
} 
 <p align="center">
    <button><a href="twitter.com/TheOnlyDecipher">Twitter page</a></button> <button><a href="Contact.html">Contact Information</a></button> <button><a href="points.html">Points of Interest</a></button>
    <button><a href="Learning.html">Learning notes</a></button> <button><a href="Beebs.html">Notes for Wife</a></button> <br />
    <br />
</p>

Комментарии:

1. Как бы я мог центрировать кнопку на экране?

2. я отредактировал и поставил кнопку по центру

3. Я пытаюсь отделить кнопки, это работает иначе просто пытаюсь получить некоторое пространство и и отступы между ними<p align=»center»> <button><a href=» Twitter» rel=»nofollow noreferrer»> twitter.com/TheOnlyDecipher»>Твиттер страница</a></button> <button> <a href=»Contact.html»>Контактная Информация</a></button> <button> <a href=»points.html»>Достопримечательности</a></button> <button> <a href=»Learning.html»>Обучение ноты</a></button> <button> <a href=»Beebs.html»>Ноты для жены</a></button> <br><br> </p>

4. @TheOnlyDecipher вы можете использовать отступы между кнопками, но я рекомендую вам создать новый вопрос.

5. Ну ладно, сделаю, большое тебе спасибо

Метки: