Гибкая кнопка CSS нет изображений

Question

Нужны твои мозги!!

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

Например: минимальная ширина кнопки, скажем, 95 пикселей

и это здорово для ДОМА или О НАС, но если у меня есть копия, это как команда городского совета Далласа

Было бы здорово, если бы кнопка стала шире.

Кто-нибудь может мне с этим помочь? довольно пожалуйста? Я свела себя с ума!!!

Огромное спасибо заранее!!!

Answer 1

Вот так я и решил свою проблему. это не так красиво, как хотелось бы, но это сработает. У меня были проблемы с настройкой минимальной ширины, поэтому я просто изменил ее на фиксированную ширину 200, потому что это все пространство, которое у меня есть. это, как говорится, если вы удалите DISPLAY: INLINE-BLOCK; он вернется к масштабированию на основе копирования кнопки меню (даже если вы оставите ширину:200px; там)

Я также должен был создать классы "левого якоря меню", потому что все наши ссылки были синими и не очень хорошо отображались, но это было просто быстрое копирование, переименование и изменение цвета.

Спасибо, ребята, за вашу помощь! Я действительно ценю это. надеюсь, что это поможет некоторым взглядам в будущем.

.left_menu_btn_css {
  background: #39a7f0;
  background-image: -webkit-linear-gradient(top, #39a7f0, #2979ab);
  background-image: -moz-linear-gradient(top, #39a7f0, #2979ab);
  background-image: -ms-linear-gradient(top, #39a7f0, #2979ab);
  background-image: -o-linear-gradient(top, #39a7f0, #2979ab);
  background-image: linear-gradient(to bottom, #39a7f0, #2979ab);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  width: 200px;
  display: inline-block;
}

.left_menu_btn_css:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

Answer 2

Я не совсем понимаю ваш вопрос, но если вы хотите сделать масштаб класса кнопки в зависимости от текста в кнопке, вам не следует придавать ей ширину, а просто стилизовать ее с помощью отступов.