Как составить кнопочку из кодов HTML для дневника.
ДОРОГИЕ МОИ ДРУЗЬЯ,ЧИТАТЕЛИ И ГОСТИ!
На днях у меня произошёл один "казус", мои картинки - кнопочки не всегда стали отображаться в дневнике и в сообществах.И это уже не один раз..Поняла сразу, что это происходит каждый раз когда случается сдвиг на сайте нашего Ли.ру. И тогда начинаются "глюки"(как мы привыкли говорить) и каждый раз обновлять картинки - просто не хватает ни времени ,ни терпения...
Тогда я решила попробовать на основе кодов рамочек сделать кнопочку, стала искать все возможности и нашла ...Спасибо сайту и его разработчику "БЛОГ СТАРОГО ПЕРЦА"
Поэтому пост сделан на основе его рекомендаций и моих дополнений по дизайну кнопочки:
Для начала: Что такое код HTML..
Код HTML - это язык программирования во Всемирной паутине. Код HTML интерпретируется браузерами; полученный в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства.
По сути, все команды языка HTML - это обычный текст, который может быть написан в любом текстовом редакторе. Изменив у текстового файла расширение на HTML мы получаем полноценную веб-страницу, которую может обрабатывать браузер.
Ну не будем на этом зацикливаться и начнём с простой кнопочки и её кода HTML.
Большой плюс этой кнопочки, что на неё не влияют глюки сайта, а также удобна тем, что не меняя её дизайн, не загружая в фотошоп, можно поменять всегда надпись на кнопочке..(т.е. убрасть старую и написать новую прямо в редакторе дневнике)
Вот так кнопочка выглядит в простом коде:
Вы заметили, что при клике на неё она немного меняет цвет..(да..так и есть)
Но беда в том, что эта кнопочка будет расширяться и удлиняться при написания в ней текста, для этого нам надо установить размер кнопочки (допустим длина 30 пикс. и ширина 150 пикс) тогда у нас кнопочка принимает установленный размер, но помните,если вы напишите в ней текст в две строки, то нижняя строка будет выходить за пределы самой кнопочки, поэтому надо устанавливать такой размер кнопочки, чтобы название кнопочки входил в установленный размер рамочки или уменшить размер самого шрифта.
Чтобы правильно отображался размер, то мы код button меняем на button style=" ,потому что Вы задаёте стиль/дизайн кнопочки и теперь она уже не будет расстягиваться..
Белая кнопочка не всегда подходит к дизайну дневника и хочется что-то такое-этакое..Тогда мы устанавливаем цвет кнопочки кодом: background: # ,для этого нам нужен код цвета, например #FF8C00..Код цвета можно взять : здесь, загрузив сюда Ваш фон и вывести точный код цвета для Вашего дизайна или вкуса , или здесь, где уже готовые коды цвета,Вы их копируете и вставляете в код кнопочки.
Уже лучше)) не правда ли?
Ну раз мы изменили цвет кнопочки,то значит и цвет шрифта надо изменить, стобы было видно, если фон тёмный на кнопочке, а также размер и стиль шрифта. Это знакомо всем, кто работает на Ли.ру..
Также можно сделать шрифт жирным :
...или с тенью:
Эту кнопочку можно сделать с тенью(т.е. в формате 3D)Для этого добавляем код тени, как мы это уже научились делать в рамочках и тексте:
Чтобы ещё придумать?.. Ну конечно же!! мы же любим и округлённые углы,..добавляем код радиуса)) Сделаю-ка я с радиусом 50 пикс.применив код или тег: border-radius, здесь уже Ваш вкус насколько Вы хотите округлить свою кнопочку.
Раз мы округлили кнопочку, то можно сделать её обводку и применим код: border
Стиль обводки можно выбрать любой их несколько видов:
При нажатии на кнопочку курсором, кнопочка даёт минимальным движением, что процесс пошёл))) Как кнопочки выглядят у меня-Вы увидите в моём дневнике наверху.
Удачи, милые,в Ваших трудах и если есть вопросы,ЗАДАВАЙТЕ в комментариях.. Сейчас у меня появилось немного времени..Заранее прошу прощения за опечатки и ошибки..Бывает))
