Как составить кнопочку из кодов 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

Рубрики:

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

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

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

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

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

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

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

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

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

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

Schamada

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