Кнопка CSS с закругленными углами, реагирующая на нажатия

Question

Я пытаюсь создать определенную кнопку CSS, описанную здесь:

http://www.2shared.com/file/5131551/412bd8a8/Sans_titre-1_copie.html

По сути, это кнопка, которая удовлетворяет следующим условиям:

• внутренний текст является содержимым HTML будет содержать текст + изображения)
• имеет закругленные углы
• Меняет цвета, когда мышь наводит курсор
• Гибкая ширина и высота
• Это радио-кнопка, которую можно активировать при нажатии в любом месте кнопки.

Любая идея или ссылка, которая может помочь мне создать его?

Answer 1

http://css -tricks.com / видео-скринкасто / 17-раздвижные двери-кнопка /

Это крутой способ иметь динамический / гибкий размер для кнопки, и было бы не сложно поместить в него любой HTML-код, который вы хотите ... вам придется немного поиграть с CSS больше для раскраски, но я думаю, что вы должны быть в порядке с небольшим количеством креативного CSS / HTML.

Начните с создания этой кнопки и держите нас в курсе всех полученных результатов CSS!

Сложение:

У вас нет времени, чтобы попробовать это прямо сейчас, но сделайте переключатель, текст и изображения в html с пролетом, используйте эту ссылку для гибких размеров, а затем наведите курсор на изменение цвета в CSS ... снова держите нас в курсе!

Answer 2

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

HTML:

<a href="your-url-here" class="button">
  <div class="inner-1">
    <div class="inner-2">
      <div class="inner-3">
        Your stuff
      </div>
    </div>
  </div>
</a>

CSS:

a.button {
  background: url('topleft-image-url') no-repeat top left;
  display: block;
  float: left;
}

  a.button .inner-1 { url('topright-image-url') no-repeat top right; }
  a.button .inner-2 { url('bottomright-image-url') no-repeat bottom right; }
  a.button .inner-3 {
    url('bottomleft-image-url') no-repeat bottom left;
    padding: 0.5em;
  }

  // You still need to re-speicify the extra attributes of background for browser compatibility
  a.button:hover { background: url('topleft-image-url-over') no-repeat top left; }

    a.button:hover .inner-1 { url('topright-image-url-over') no-repeat top right; }
    a.button:hover .inner-2 { url('bottomright-image-url-over') no-repeat bottom right; }
    a.button:hover .inner-3 { url('bottomleft-image-url-over') no-repeat bottom left; }

Если вы избавитесь от одного из ограничений размера (например, ширины или высоты), вы можете опустить два div с (то есть сделать раздвижную дверь с двусторонним движением).

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

Немного подумав, вы, вероятно, сможете выяснить, как объединить оба состояния в одно изображение, используя фоновое позиционирование в процентах или пикселях. Это также позволит вам упростить CSS.