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

[Татьяна5]

Это не новый класс, это комбинация старых

[нюся]

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

Не получается как надо... то фон-иконка за пределы вылазит, то наоборот лишнее на неё налазит, а почему нельзя её просто иконкой сделать?
я в интернете нашла как делать фоном вот
Добавление на страницу в качестве фона с использованием CSS

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

.logo {
  background: url(data:image/svg+xml;base64,[data]);
}

Где вместо [data] код сконвертиванного в в этой проге http://www.mobilefish.com/services/base64/base64.php файл svg

Добавлено спустя 15 минут 59 секунд:
Все решает

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

background-image:

[Пчелкин]

Это не новый класс, это комбинация старых

Не получается... уже измучился... Задача вроде простая - именно в нарисованных кнопках убрать подчеркивание при наведении...
Ничего не помогает... Даже это text-decoration: none; ХТМЛбук уже весь перевернул
Код кнопки

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

.quickreply-icon span { );
}
.buttons div.quickreply-icon
{
  border: 2px solid #CCCCCC;
  height: 25px;
  width: 148px;
  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.quickreply-icon:hover {
  border: 2px solid #000066;
  text-decoration: none;
}

До наведения -

1776.jpg

После наведения -

1777.jpg

Все портит подчеркивание. Глобально убирать подчеркивание - не айс... А по месту кода - не выходит... млин...

[владимир1983]

Дай тестового.

Добавлено спустя 3 минуты 31 секунду:

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

#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
    color: #000066;
}

Пропадают ссылки категорий.

[Пчелкин]

Володь
Test_№_01
Test_№_01
Глобально подчеркивание убирал. Но это не то... Надо по месту убрать именно в кнопках...
Вот пробую а ничего не выходит
Пока с кнопкой Быстрого ответа долбаюсь
Весь ее КСС

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

.quickreply-icon span { }
.buttons div.quickreply-icon
{
  border: 2px solid #CCCCCC;
  height: 25px;
  width: 148px;
  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.quickreply-icon:hover {
  border: 2px solid #000066;
  text-decoration: none;
}

Добавляю a в строки
.buttons div.quickreply-icon a:hover
и
.buttons div.quickreply-icon a
Все расползается к чертям...

Добавлено спустя 1 минуту 30 секунд:
Все!!! Получилось... Афигеть!!! Прорисованные кнопки - круто!!!

Теперь можно выкидывать прописки картинок со всех мест и с админки тож...

Все сработало так -

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

/* Big button image, color and background */
.quickreply-icon span { }
.buttons div.quickreply-icon a
{
  border: 2px solid #CCCCCC;
  height: 25px;
  width: 148px;
  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.quickreply-icon a:hover {
  border: 2px solid #000066;
  text-decoration: none;
}

Я - дурак... Нечаянно букву А подставлял русскую... Идиот..