Как составить кнопочку из кодов HTML для дневника.

Суббота, 10 Октября 2020 г. 13:26 + в цитатник

ДОРОГИЕ МОИ ДРУЗЬЯ,ЧИТАТЕЛИ И ГОСТИ!
На днях у меня произошёл один "казус", мои картинки - кнопочки не всегда стали отображаться в дневнике и в сообществах.И это уже не один раз..Поняла сразу, что это происходит каждый раз когда случается сдвиг на сайте нашего Ли.ру. И тогда начинаются "глюки"(как мы привыкли говорить) и каждый раз обновлять картинки - просто не хватает ни времени ,ни терпения...
Тогда я решила попробовать на основе кодов рамочек сделать кнопочку, стала искать все возможности и нашла ...Спасибо сайту и его разработчику "БЛОГ СТАРОГО ПЕРЦА"
Поэтому пост сделан на основе его рекомендаций и моих дополнений по дизайну кнопочки:
Для начала: Что такое код HTML..
Код HTML - это язык программирования во Всемирной паутине. Код HTML интерпретируется браузерами; полученный в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства.
По сути, все команды языка HTML - это обычный текст, который может быть написан в любом текстовом редакторе. Изменив у текстового файла расширение на HTML мы получаем полноценную веб-страницу, которую может обрабатывать браузер.

Ну не будем на этом зацикливаться и начнём с простой кнопочки и её кода HTML.
Большой плюс этой кнопочки, что на неё не влияют глюки сайта, а также удобна тем, что не меняя её дизайн, не загружая в фотошоп, можно поменять всегда надпись на кнопочке..(т.е. убрасть старую и написать новую прямо в редакторе дневнике)

Вот так кнопочка выглядит в простом коде:

<button>Простая кнопочка</button>

Вы заметили, что при клике на неё она немного меняет цвет..(да..так и есть)

Но беда в том, что эта кнопочка будет расширяться и удлиняться при написания в ней текста, для этого нам надо установить размер кнопочки (допустим длина 30 пикс. и ширина 150 пикс) тогда у нас кнопочка принимает установленный размер, но помните,если вы напишите в ней текст в две строки, то нижняя строка будет выходить за пределы самой кнопочки, поэтому надо устанавливать такой размер кнопочки, чтобы название кнопочки входил в установленный размер рамочки или уменшить размер самого шрифта.
Чтобы правильно отображался размер, то мы код button меняем на button style=" ,потому что Вы задаёте стиль/дизайн кнопочки и теперь она уже не будет расстягиваться..

<button style="width: 120px; height: 30px;">Кнопочка</button>

Белая кнопочка не всегда подходит к дизайну дневника и хочется что-то такое-этакое..Тогда мы устанавливаем цвет кнопочки кодом: background: # ,для этого нам нужен код цвета, например #FF8C00..Код цвета можно взять : здесь, загрузив сюда Ваш фон и вывести точный код цвета для Вашего дизайна или вкуса , или здесь, где уже готовые коды цвета,Вы их копируете и вставляете в код кнопочки.

<center><button style="width: 120px; height: 30px;background:#FF8C00;">Кнопочка</button></center>

Уже лучше)) не правда ли?
Ну раз мы изменили цвет кнопочки,то значит и цвет шрифта надо изменить, стобы было видно, если фон тёмный на кнопочке, а также размер и стиль шрифта. Это знакомо всем, кто работает на Ли.ру..

<center><button style="width: 120px; height: 30px;background:#FF8C00;"><span style="font-family:arial;color:#ffffff;font-size:16px;">Кнопочка</span></button></center>

Также можно сделать шрифт жирным :

<center><button style="width: 120px; height: 30px;background:#FF8C00;"><span style="font-family:arial;color:#ffffff;font-size:16px;"><b>Кнопочка</b></span></button></center>

...или с тенью:

<center><button style="width: 120px; height: 30px;background:#FF8C00;"><span style="font-family:arial;text-shadow:1px -2px #8B4513;color:#ffffff;font-size:16px;"><b>Кнопочка</b></span></button></center>

Эту кнопочку можно сделать с тенью(т.е. в формате 3D)Для этого добавляем код тени, как мы это уже научились делать в рамочках и тексте:

<button style="width: 120px; height: 30px;background:#FF8C00; box-shadow: 0px 0px 5px #8B4513;"><span style="font-family:arial;color:#ffffff;font-size:16px;"><b>Кнопочка</b></span></button>

Чтобы ещё придумать?.. Ну конечно же!! мы же любим и округлённые углы,..добавляем код радиуса)) Сделаю-ка я с радиусом 50 пикс.применив код или тег: border-radius, здесь уже Ваш вкус насколько Вы хотите округлить свою кнопочку.

<center><button style="width: 120px; height: 30px;background:#FF8C00; box-shadow: 0px 0px 5px #000000; border-radius: 50px;"><span style="font-family:arial;color:#ffffff;font-size:16px;"><b>Кнопочка</b></span></button></center>

Раз мы округлили кнопочку, то можно сделать её обводку и применим код: border

<center><button style="width: 120px; height: 30px;background:#FF8C00; box-shadow: 0px 0px 5px #8B4513; border-radius: 50px;border: 3px solid #A52A2A;"><span style="font-family:arial;color:#ffffff;font-size:16px;"><b>Кнопочка</b></span></button></center>

Стиль обводки можно выбрать любой их несколько видов:

При нажатии на кнопочку курсором, кнопочка даёт минимальным движением, что процесс пошёл))) Как кнопочки выглядят у меня-Вы увидите в моём дневнике наверху.
Удачи, милые,в Ваших трудах и если есть вопросы,ЗАДАВАЙТЕ в комментариях.. Сейчас у меня появилось немного времени..Заранее прошу прощения за опечатки и ошибки..Бывает))
Берегите себя,мои родные - Ваша Schamada

Рубрики:

ДИЗАЙН ДНЕВНИКА/- уроки
ДИЗАЙН ДНЕВНИКА/- кнопки перехода

Метки: уроки дизайн кнопочки

Процитировано 39 раз
Понравилось: 69 пользователям

<a href="https://www.liveinternet.ru/users/schamada/post475605267/">РљР°Рє СЃРѕСЃС‚Р°РІРёС‚СЊ РєРЅРѕРїРѕС‡РєСѓ РёР· РєРѕРґРѕРІ HTML РґР»СЏ РґРЅРµРІРЅРёРєР°.</a><br/>Р”РћР РћР“РР• РњРћР Р”Р РЈР—Р¬РЇ,Р§РРўРђРўР•Р›Р Р Р“РћРЎРўР!
РќР° РґРЅСЏС… Сѓ РјРµРЅСЏ РїСЂРѕРёР·РѕС€С‘Р» РѕРґРёРЅ "РєР°Р·СѓСЃ", РјРѕРё РєР°СЂС‚РёРЅРєРё - РєРЅРѕРїРѕС‡РєРё РЅРµ РІСЃРµРіРґР° СЃС‚Р°Р»Рё РѕС‚РѕР±СЂР°Р¶Р°С‚СЊСЃСЏ РІ РґРЅРµРІРЅРёРєРµ Рё РІ СЃРѕРѕР±С‰РµСЃС‚РІР°С….Р СЌС‚Рѕ СѓР¶Рµ РЅРµ РѕРґРёРЅ СЂР°Р·..РџРѕРЅСЏР»Р° СЃСЂР°Р·Сѓ, С‡С‚Рѕ СЌС‚Рѕ РїСЂРѕРёСЃС…РѕРґРёС‚ РєР°Р¶РґС‹Р№ СЂР°Р· РєРѕРіРґР° СЃР»СѓС‡Р°РµС‚СЃСЏ СЃРґРІРёРі РЅР° СЃР°Р№С‚Рµ РЅР°С€РµРіРѕ Р›Рё.СЂСѓ. Р С‚РѕРіРґР° РЅР°С‡РёРЅР°СЋС‚СЃСЏ "РіР»СЋРєРё"(РєР°Рє РјС‹ РїСЂРёРІС‹РєР»Рё РіРѕРІРѕСЂРёС‚СЊ) Рё РєР°Р¶РґС‹Р№ СЂР°Р· РѕР±РЅРѕРІР»СЏС‚СЊ РєР°СЂС‚РёРЅРєРё - РїСЂРѕСЃС‚Рѕ РЅРµ С…РІР°С‚Р°РµС‚ РЅРё РІСЂРµРјРµРЅРё ,РЅРё С‚РµСЂРїРµРЅРёСЏ... 
РўРѕРіРґР°  СЏ СЂРµС€РёР»Р° РїРѕРїСЂРѕР±РѕРІР°С‚СЊ РЅР° РѕСЃРЅРѕРІРµ РєРѕРґРѕРІ СЂР°РјРѕС‡РµРє СЃРґРµР»Р°С‚СЊ РєРЅРѕРїРѕС‡РєСѓ, СЃС‚Р°Р»Р° РёСЃРєР°С‚СЊ РІСЃРµ РІРѕР·РјРѕР¶РЅРѕСЃС‚Рё Рё РЅР°С€Р»Р° ...РЎРїР°СЃРёР±Рѕ СЃР°Р№С‚Сѓ Рё РµРіРѕ СЂР°Р·СЂР°Р±РѕС‚С‡РёРєСѓ "Р‘Р›РћР“ РЎРўРђР РћР“Рћ РџР•Р Р¦Рђ"
РџРѕСЌС‚РѕРјСѓ РїРѕСЃС‚ СЃРґРµР»Р°РЅ РЅР° РѕСЃРЅРѕРІРµ РµРі... <a href="https://www.liveinternet.ru/users/schamada/post475605267/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

valvallu обратиться по имени Суббота, 10 Октября 2020 г. 14:00 (ссылка)

Олюшка, привет! Очень подробно и очень понятно. Но я до сих пор не знаю как их применять, а очень хочется. Может быть научишь?

Ответить С цитатой В цитатник

Воскресенье, 11 Октября 2020 г. 12:55ссылка

Schamada

Валечка,безусловно помогу, но для начала попробуй сама по описаниям урока.. Я под каждой кнопочкой даю код в окошечке..Ты его скопируй и там сама попробуй что-то изменить, у меня подробное описание..