Css оформление кнопок: Buttons Основные стили кнопок CSS уроки для начинающих академия

javascript — Не получается оформить кнопку ‘submit’ в css

Вопрос задан 8 лет 2 месяца назад

Изменён 8 лет 2 месяца назад

Просмотрен 426 раз

Доброе всем время.

У меня javascript добавляет строку в таблице, в которой добавляется кнопка (в виде картинки):

<td><input name='save' type='submit'></td>

Которую я пробую описывать в css:

.btn_save 
   {height: 50px; 
    width: 70px;
    margin: 0; 
    padding:0; 
    border: 0; 
    background: transparent url('save.png') no-repeat center top; 
    text-indent: -1000em; 
    cursor: pointer; 
    cursor: hand; }

Сразу скажу, что такое оформление подсмотрел на сайте.
Но почему-то у меня в разных browsers происходит что-то непонятное с размерами кнопки, (допустим, когда я открыл режим («opera drgonfly») в opera, я увидел, что это высота первоначальной кнопки «submit» режет изображение, а в dreamweaver – как бы все нормально, но текст кнопки «submit» лежит по вех моего изображения), т.

е. во всех browser у меня творится какая-то фигня.

Где тут собака зарыта?

P.S. Если я описываю ее в html, то все нормально:

<?=Form::image(
     'submit', 'picture', 
      array('src'  => 'media/Img/save.png',
         'onmouseover'   => 'this.src=\'/media/Img/save_click.png\';',
         'onmouseout'    => 'this.src=\'/media/Img/save.png\';',
      )
)?>

• javascript
• kohana
• css

2

просто там есть режим «Split»

Да, я в курсе. Использовал этот продукт еще когда он принадлежал компании Macromedia

@Konstantin78, не очень понято, зачем Вы используете отступ text-indent (а-ля красная строка). Хотя, наверно, чтобы дефолтный текст убрать. Достаточно для кнопки прописать value="":

<input name='save' type='submit' value="">

• Пример с загрузкой по url (могут быть проблемы с 403/404 ошибкой, ибо грузится с dropbox)
• Пример с data uri (изображение в base64 кодировке). Поддержка браузерами

6

Применяйте стиль не к классу, а к элементу:

[css]
input[type=submit] {
    •••
}
[/css]

или конкретизируйте (если еще будут сабмиты с другими стилями):

[css]
input[type=submit].btn_save {
    •••
}
[/css]

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Модернизация стандартных share-кнопок в Blogger(Blogspot)

Используя CSS, можно изменить дизайн практически любого элемента блога, а при помощи JavaScript еще и его функциональность.
  Чтобы изменить вид стандартных кнопок «поделится» в блоге на платформе Blogger, достаточно лишь добавить желаемые CSS-свойства к правильно указанным идентификаторам. По желанию, можно самостоятельно дополнить набор кнопок установленных по умолчанию, HTML-кодом своих кнопок с ссылками нужных социальных сетей, например ВКонтакте или Одноклассники. Если имеющийся вариант не устраивает совсем, по ряду объективных причин, то можно заменить весь блок используя JS-плагин от стороннего разработчика или свой собственный.

Как изменить оформление стандартных кнопок для публикации Blogger

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

.post-share-buttons.goog-inline-block {
 display: block;
}
.goog-inline-block {
 margin: 3px 3px 3px 0;
}
.share-button {
 width: 40px;
 height: 20px;
 background-image: none !important; /*для некоторых свойств значение !important обязательно*/
 background-color: #000 !important;
 border-radius: 3px;
 overflow: hidden;

 color: #FFF !important;
 position: relative;
 text-align: center;
}
.share-button:hover {
 opacity: .7;
}
.share-button:before {
 display: inline-block;
 font-family: FontAwesome; /*для иконок подключаем иконочный шрифт*/
 margin-top: 2px;
}
.sb-email {
 background-color: #989898 !important;
}
.sb-blog {
 background-color: #FD9020 !important;
}
.sb-facebook {
 background-color: #3859B7 !important;
}
.sb-pinterest {
 background-color: #EC1717 !important;
}
.

sb-twitter {
 background-color: #5DC5EC !important;
}
a.share-button[href*=»blog»]:before {content:»\f040″}
a.share-button[href*=»facebook»]:before {content:»\f09a»}
a.share-button[href*=»twitter»]:before {content:»\f099″}
a.share-button[href*=»pinterest»]:before {content:»\f231″}
a.share-button[href*=»email»]:before {content:»\f0e0″}

  Результат будет примерно таким:

Как добавить кнопки других социальных сетей к стандартным кнопкам Blogger

  Чтобы получить возможность делиться своим контентом в отечественных социальных сетях достаточно добавить в код стандартного блока share-кнопок от Blogger HTML-код нужной кнопки. После строки:

  <b:includable var=’post’>

  — и желательно до начала кода кнопки G+:

  <b:if cond=’data:top.showPlusOne’><…

  Например для кнопки ВКонтакте код будет таким:

 <a expr:href=’&quot;http://vk.com/share.php?url=&quot; +data:blog.canonicalUrl+ &quot;&amp;title=&quot; +data:blog. pageName+ &quot;&amp;description=&quot; +data:blog.metaDescription+ &quot;&amp;image=» +data:blog.postImageUrl+ &quot;&amp;noparse=&quot;+true’ target=’_blank’ rel=’nofollow’/>

  Параметры заполнения:

— ссылка на целевую страницу: data:blog.canonicalUrl
— имя страницы: data:blog.pageName
— краткое описание страницы: data:blog.metaDescription
— изображение на странице: data:blog.postImageUrl

Ссылки для кнопок «Поделиться» в сети Одноклассники и Mail.Ru выглядят так:

http://connect.mail.ru/share?url=[data:blog.canonicalUrl]&title=[data:blog.pageName]&description=[data:blog.metaDescription]&imageurl=[data:blog.postImageUrl]
http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=[data:blog.canonicalUrl]&st.comments=[data:blog.pageName]

Оформляются по аналогии с примером выше.

©http://magentawave.com

ch5-кнопочный стиль

Класс CSS	Описание
ch5-кнопка	Основной класс
кнопка ch5-этикетка	Наносится на этикетку
ch5-кнопка-иконка	Наносится на иконы
ch5-кнопка—img	Наносится на изображения
ch5-кнопка—прямоугольник	Применяется, когда shape=’прямоугольник’
ch5-кнопка-закругленный прямоугольник	Применяется, когда shape=’rounded-rectangle’
ч5-кнопка-кружок	Применяется, когда shape=’circle’
ch5-кнопка-овальная	Применяется, когда shape=’oval’
ch5-кнопка—вкладка	Применяется, когда shape=’tab’
ch5-кнопка-текст	Применяется, когда type=’text’
ch5-кнопка—опасность	Применяется, когда type=’danger’
ch5-кнопка—предупреждение	Применяется, когда type=’warning’
ch5-кнопка—информация	Применяется, когда type=’info’
кнопка ch5 — успех	Применяется, когда type=’success’
кнопка ch5 — по умолчанию	Кнопка по умолчанию
ch5-кнопка—основной	Применяется, когда type=’primary’
ch5-кнопка—вторичный	Применяется, когда type=’secondary’
ch5-кнопка — выбрано	Применяется при подаче выбранного сигнала
ch5-кнопка — нажата	Применяется между пресс-релизами и релизами
ch5-кнопка — отключено	Применяется, когда кнопка отключена
ch5-button—stretch-width	Применяется, чтобы сделать ширину настолько большой, насколько позволяет его родитель.
ch5-button—stretch-height	Применяется, чтобы сделать высоту настолько большой, насколько позволяет его родитель.
ch5-button—stretch-оба	Применяется, чтобы сделать ширину и высоту настолько большими, насколько позволяет его родитель.
ch5-кнопка-вертикальная	Вертикальная ориентация
ch5-кнопка—горизонтальная	Горизонтальная ориентация
ch5-button—size-x-small	Применяется, когда size=»x-small»
ch5-кнопка—размер-маленький	Применяется, когда size=»small»
ch5-кнопка-размер-обычный	Применяется, когда size=»regular»
ch5-кнопка-размер-большой	Применяется, когда размер = «большой»
ch5-кнопка-размер-x-большой	Применяется, когда size=»x-large»
ch5-button—icon-url-fill-type-stretch	Применяется, когда iconUrlFillType=»stretch»
ch5-button—icon-url-fill-type-stretch-aspect	Применяется, когда iconUrlFillType=»stretch-aspect»
ch5-button—icon-url-fill-type-center	Применяется, когда iconUrlFillType=»center»
ch5-button—icon-url-fill-type-tile	Применяется, когда iconUrlFillType=»tile»
ch5-button—icon-url-fill-type-initial	Применяется, когда iconUrlFillType=»initial»
ch5-button—background-image-fill-type-stretch	Применяется, когда backgroundImageFillType=»stretch»
ch5-button—background-image-fill-type-stretch-aspect	Применяется, когда backgroundImageFillType=»stretch-aspect»
ch5-button—background-image-fill-type-tile	Применяется, когда backgroundImageFillType=»tile»
ch5-button—background-image-fill-type-center	Применяется, когда backgroundImageFillType=»center»

[CSS] — Как оформить квадратную кнопку с помощью CSS — SheCodes

Узнайте, как создать квадратную кнопку с помощью CSS. Пошаговое руководство по созданию квадратной кнопки CSS с кодом.

👩‍💻 Технический вопрос

Спросил 4 месяца назад в CSS Дарья

 
, пожалуйста, предложите CSS для квадратной кнопки 
 

HTML кнопка стиль дизайн квадрат CSS форма

Дополнительные вопросы по кодированию о CSS

👩‍💻 Технический вопрос

Спросил 11 дней назад в CSS Мишель

 
 Почему класс «Сегодня» не помещен непосредственно под класс «Визуальный»? Как мне сделать это так?

    .weatherAppBody {
            дисплей: блок;
            верхнее поле: 100 пикселей;
            поле справа: 300 пикселей;
            нижняя граница: 100px;
            поле слева: 300px;
            отступ: 80px 100px;
      
            
        }
ч2 {
    размер шрифта: 20px;
    выравнивание текста: по левому краю;
    поле: 0 авто;
    плыть налево;
}

h3 {
    вес шрифта: 100;
}

. текущая информация {

отображение: встроенный блок;
выравнивание текста: по левому краю;
поле: 0 авто;


}

.localInfo {
    стиль списка: нет;
    отображение: встроенный блок;
  
}

.сегодня {

  выравнивание текста: вправо;
  поле сверху: 0px;
  поле справа: 0px;
  поплавок: справа;
}

.визуальный {
  стиль списка: нет;
  поплавок: справа;
  поле сверху: 0px;
  поле справа: 0px;
  ясно: оба;
}

.Полная неделя {
размер шрифта: 20px;
 положение: нижнее; внизу: 0px;
 нижняя граница: 0px;

} 
 

УС флексбокс заказ имущества

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Татьяна

 
 как закодировать страницу с фоновым изображением, которое является адаптивным 
 

background-image отзывчивый CSS медиа-запрос

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Татьяна

 
 как выровнять две кнопки по сторонам 
 

CSS флексбокс выравнивание содержания кнопки

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Татьяна

 
 как раскрасить шрифт в навбаре 
 

CSS панель навигации цвет шрифта

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Кларисса

 
 Как изменить конкретное семейство шрифтов в синтаксисе 
 

CSS семейство шрифтов синтаксис селектор

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS от Folasayo

 
 как добавить навигационный бургер на средний экран 
 

навигация бургер меню медиазапросы отзывчивость

👩‍💻 Технический вопрос

Вопрос 19дней назад в CSS от Folasayo

 
 как скрыть панель навигации для среднего экрана? 
 

панель навигации медиа-запрос Адаптивный дизайн

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS by Florencia

 
 как я могу центрировать css ul 
 

CSS ул центр

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS от Алина

 
 как сделать текст фиксированным 
 

CSS текст фиксированная позиция окно просмотра прокрутка

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS от Folasayo

 
 какую утилиту CSS я могу использовать для увеличения моего изображения? 
 

УС полезность изображение трансформировать шкала

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS от Сулинни

 
 изменить код меню размера шрифта css 
 

меню размер шрифта Свойство CSS Документация MDN

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS от Meegan

 
 как мне выровнять текст по вертикали внутри столбца сетки изменения размера vw 
 

выровнять по вертикали текст оч. сл. отзывчивый столбец сетки

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS by Meegan

 
 Как вертикально выровнять текст внутри столбца 
 

вертикальное выравнивание текст столбец Свойство CSS дисплей: гибкий выравнивание элементов: по центру

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS by Meegan

 
 Как заставить столбцы переключаться между 2 и 1 при изменении размера окна 
 

УС медиазапросы флексбокс Адаптивный дизайн

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS by Trang

 
 почему мы не можем использовать text-align: center в css для центрирования изображения 
 

выравнивание текста центрирование изображения элемент блочного уровня отображать поля

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS от Транг

 
 как центрировать изображение 
 

по центру изображение допуск флексбокс стиль

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS by Ravneet

 
 мой код не такой жирный, как хотелось бы 
 

CSS вес шрифта стиль веб-дизайн

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS от Равнит

 
 почему моя кнопка не находится в центре 
 

CSS центр кнопка флексбокс

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS by Ravneet

 
 мой вес шрифта не такой жирный, как хотелось бы 
 

CSS вес шрифта смелый типография

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS от Хой

 
 как изменить верхнюю часть магина для svg 
 

CSS SVG поле сверху

👩‍💻 Технический вопрос

Спросил 21 день назад в CSS Дариэль Морис

 
 Как изменить цвет фона элемента управления формы, когда он отключен? 
 

УС фоновый цвет контроль формы неполноценный стиль

👩‍💻 Технический вопрос

Спросил 21 день назад в CSS by Molly

 
 как создать пространство между ссылками 
 

CSS ссылки допуск пробел

👩‍💻 Технический вопрос

Спросил 21 день назад в CSS by Araceli

 
 я хочу центрировать ссылку, которая выглядит как кнопка 
 

центр связь кнопка отображать выравнивание текста

👩‍💻 Технический вопрос

Спросил 21 день назад в CSS by Araceli

 
 почему моя ссылка занимает всю ширину страницы 
 

CSS связь ширина блочный уровень отображать свойство

👩‍💻 Технический вопрос

Спросил 21 день назад в CSS by Carolina

 
 Как изменить расстояние между моим изображением и верхом? 
 

УС маржинальное свойство изображение верхний пробел

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS by Agobokoe

 
 код цвета фона страницы 
 

цвет фона Цвета CSS веб-страница

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS Надин

 
 как работает родительский код наследования в css? 
 

УС наследовать родительский элемент дочерний элемент

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS by Arianna

 
 как изменить размер одного элемента сетки, но сохранить размер другого без изменений 
 

CSS сетка сетка-шаблон-столбцы сетка-столбец Адаптивный дизайн

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS от Арианны

 
 как исправить, если размер одного из элементов сетки вообще не изменяется? 
 

УС сетка размеры характеристики поиск и устранение неисправностей

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS by Taylor

 
 Как с помощью CSS сделать изображение с закругленными углами? 
 

УС изображение закругленные углы радиус границы

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS от Arianna

 
 как установить направление сетки на строки? 
 

УС сетка ряды макет

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS Тейлор

 
 Как я могу сделать стиль всего веб-сайта центрированным и масштабируемым в CSS? 
 

УС Веб-сайт центр шкала флекс

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS by Tameka

 
 как немного сместить центрированный текст немного влево 
 

CSS выравнивание текста отступ текста центральный текст

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS Кристин

 
 как изменить цвет ссылки 
 

УС гиперссылка цвет селектор класс

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS Эми

 
 Как мне найти все кнопки, которые содержат «Продолжить покупки» в инструментах разработчика Chrome 
 

chrome инструменты разработчика кнопки поиск Селектор CSS

👩‍💻 Технический вопрос

Спросил 23 дня назад в CSS от Хейзел

 
 как сделать панель навигации по центру 
 

панель навигации центр выравнивание текста

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 23 дня назад в CSS by Hazel

 
 сделать панель навигации по центру 
 

панель навигации центр выравнивание текста CSS стиль

👩‍💻 Технический вопрос

Спросил 23 дня назад в CSS от Фоласайо

 
 как изменить размер кнопки? 
 

УС кнопка изменить размер ширина высота

👩‍💻 Технический вопрос

Спросил 23 дня назад в CSS от Folasayo

 
 как настроить кнопку по центру? 
 

УС кнопка центр

👩‍💻 Технический вопрос

Спросил 23 дня назад в CSS от Хейзел

 
 как оформить изображение логотипа в css? 
 

УС изображение логотип стиль селектор

👩‍💻 Технический вопрос

Спросил 23 дня назад в CSS от Folasayo

 
 как добавить границу к моему изображению в CSS? 
 

УС граница изображение

👩‍💻 Технический вопрос

Спросил 23 дня назад в CSS от Фоласайо

 
 как изменить размер изображения в CSS? 
 

УС изображение изменить размер ширина высота

👩‍💻 Технический вопрос

Спросил 23 дня назад в CSS от Arianna

 
 можете ли вы добавить flexbox в сетку? 
 

УС флексбокс макет сетки

👩‍💻 Технический вопрос

Спросил 24 дня назад в CSS Ная

 
 Что такое каскад? 
 

каскад стили HTML конфликт приоритет

👩‍💻 Технический вопрос

Спросил 24 дня назад в CSS by Elicea

 
 Как переместить кнопку рядом с текстовой формой, а не под ней? 
 

УС позиционирование HTML кнопка текстовая форма

👩‍💻 Технический вопрос

Спросил 24 дня назад в CSS Сара

 
 мы должны добавить поля к телу? 
 

УС элемент тела допуск интервал код

👩‍💻 Технический вопрос

Спросил 24 дня назад в CSS автор Arianna

 
 как настроить сетку для размещения контента по горизонтали? 
 

УС сетка макет дизайн отзывчивый

👩‍💻 Технический вопрос

Спросил 24 дня назад в CSS от Arianna

 
 можете ли вы создать сетку css в существующей сетке? 
 

Сетка CSS вложенная сетка HTML веб-дизайн

👩‍💻 Технический вопрос

Спросил 24 дня назад в CSS от Arianna

 
 как установить размер контейнера для определенных ячеек сетки? 
 

Сетка CSS размер контейнера сетка-шаблон-строки сетка-шаблон-столбцы фр

👩‍💻 Технический вопрос

Спросил 24 дня назад в CSS автор Arianna

 
 Как мне заставить мою сетку сохранять промежутки между столбцами при уменьшении размера? 
 

УС сетка зазор сетки мин Макс отзывчивый

Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС Питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.