как установить css кнопки

[Пчелкин]

Ну давай, сваяй.

А чо сразу я...

[Sheer]

А что, я? Сказал надо, думаешь rxu или еще кто-то должен броситься писать FAQ? Раз ты в теме (HTML - 1 есс, CSS - пол есс) возьми, да напиши, помоги любимому ресурсу.

[Пчелкин]

Млин... Попался... И про "любимый" как ножом по горлу: вжик...

[нюся]

Разобралась, только проблема в том что перекрашиваются все ссылки, а хотелось бы что бы только на кнопках.

[Татьяна5]

Код: Выделить всё

.buttons a

[xisp]

И воще - неплохо бы уже наваять здесь FAQ по замене картиночных кнопок на прорисованные в CSS,

В 3.1 уже всё есть, так что фак уже написан- это фак по обновлению.

[нюся]

Спасибо))) А может кто то знает возможно ли сделать в ксс вот такие иконки как сайте https://icomoon.io/app/#/select?
Я оттуда качала иконки, но они в формате SVG и как правильно их поставить я не знаю.

[xisp]

Можно эти иконки использовать в качестве фонового рисунка, например.

[нюся]

Мне надо чтобы это были кнопка иконка, они качаются поштучно

[xisp]

Ну так иконка будет фоном, а текст скрывайте. Всё в интернете есть.

[Пчелкин]

так что фак уже написан

И хрен с ним
Собрал на досуге вот посимпатишней чем из 3.1.Х:

Код: Выделить всё

.buttons div.post-icon
{
  border: 2px solid #CCCCCC;
  height: 25px;
  width: 112px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 28px;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;  
   /*закругленные углы*/
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
 
  /*градиент*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
 
  /*Transition*/
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;
}
.buttons div.post-icon:hover {
  border: 2px solid #0033CC;
  background: #E9E9E9;
}

Теперь полностью исключить бы изменение текста кнопки как ссылки (что б вообще не менялся цвет текста), а привязать вызов новой темы к изменению цвета бордера - border:. Воще было б шикарно...

[Татьяна5]

http://htmlbook.ru/css/hover
Можно установить для ссылки тот же самый цвет, что и до наведения. А так же сменить border.

[Пчелкин]

Хм...тогда меняется цвет по всему форуму на все ссылки... Пробовал

[Татьяна5]

Нужны ссылки, которые находятся в div с классом post-icon, который в свою очередь находится в элементе с классом buttons
То есть (справа налево):

Код: Выделить всё

.buttons div.post-icon a:hover

[Пчелкин]

Все равно ничего не понял, мысль кончилась... Новый класс чтоль создавать? Тогда ну его на фиг... Пусть будет так -
http://fotovideoforum.ru/topic4951.html#topictitle