вторник, 4 февраля 2014 г.

Кнопка-ссылка с помощью CSS стиля для блога .(Генератор CSS кнопок) Йёжа Йежов

Кнопка

Стих Йёжи Йежова


На блог бы кнопку нам хотелось
Такую ,чтобы прямо   эхх !!!
Такой вот кнопки не имелось !
Такой , чтоб лучше кнопок всех !

Ещё желательно , чтоб цвет
При мышки наведении меняла .
Искал везде , но кнопки нет !
Простая кнопка , как меня достала !

И всё же я нашёл мечту свою .
На сайте где-то там лежала
Как хороша  ты , мать твою !
Ты цвет при наведении меняла !

Ну , что ко мне на блог пойдёшь ?!
И будешь ты на блоге Йёжи !
Теперь уж от меня ты не уйдёшь !
Читателям служить ты будешь тоже !



Кнопка-ссылка с помощью CSS стиля для блога

Я уже рассказывал про кнопки в виде картинок в статье Картинка ссылка .Йёжа йежов
 Но иногда хочется , чего-то более оригинального.и менее статичного , чтобы ,допустим ,при нажатии, кнопка меняла цвет .Пример можете увидеть внизу моих статей .
В принципе с картинками это тоже можно сделать , но сегодня поговорим про Создание кнопки с помощью Css стилей (кстати и с картинками CSS может помочь но об этом как-нибудь потом  ).
Что за зверь такой Css -стиль ?
Это такая штука , которая помогает сделать размер , внешний вид , цвет , скруглённость углов и тд  какого-то текстового блока или к примеру кнопок . 
В принципе можете глянуть в википедии , если нужны подробности или в справочнике.Нас же волнует вопрос как это сделать ? Некоторые сайты могут  помочь в этом , но сегодня мы используем Генератор

Генератор CSS для кнопок



Отрыл я данный генератор на блоге
Блогопоиск(BloggerПоиск; www.blogopoisk.ru)
в статье Генератор кнопок CSS

С помощью данного генератора можно поменять вид кнопки и взять код для вставки в блог .Я не мог не пригласить сей генератор к себе на блог , уж больно мне понравился . Итак у нас в гостях его Цветейшество Генератор Кнопок Css . Встречайте !


  Поскольку данный генератор не захотел пожаловать на блог , то ему пришлось сделать персональный блог люкс , где он и разместился. Для перехода к генератору , нажмите кнопочку ниже,я думаю говорить , что она сотворена с помощью данного генератора, не требуется


. Перейти к генератору .
 
Пользоваться сиим творением достаточно просто . вверху мы видим три ползунка , с помощью которых можно подделать внешний вид кнопки (увеличить-уменьшить кнопку , текст , скруглить углы )

 

Поиграйтесь с ползунками , сами всё поймёте .
Ниже под ползунками видим изменение цвета . Подбираем на свой вкус.
Когда наиграемся , можно нажать кнопку вверху генератора Взять CSS
Копируем получившийся код .Полдела сделано .
Вопрос а что с этим кодом делать то ? Н-даа всё не так уж и сложно .Вставим полученный код в простую формулу ниже (это лучше делать в блокноте ) Только копируйте очень внимательно .Сгенерированный код начинается точкой и заканчивается скобкой .


<style>Код полученный от генератора</style> <a class="button" href="Адрес вашей ссылки" rel="nofollow">Название ссылки</a>


После вставки в нашу формулу кода , адреса ссылки нашего сообщения .и названия ,идём в редактирование сообщения HTML. и вставляем в нужное место статьи
Второй вариант формулы идентичен первому по способу вставки ,выглядит немного иначе .


<style type="text/css">Код полученный от генератора</style><a class="button" href="Адрес вашей ссылки" rel="nofollow">Название ссылки</a>

Какой код использовать ваше дело .У меня оба работают .
Если нам нужно сделать несколько кнопок с одним стилем на одной странице , то можно прописать стиль один раз и сделать несколько ссылок Выглядеть это будет так .
.
<style type="text/css">Код полученный от генератора</style>
вверху код стиля кнопки его пишем один раз в статье в режиме HTML ,а внизу сама ссылка -кнопка.Их может быть несколько в вашей статье ,Помещаем там , где нам необходимо
<a class="button" href="Адрес вашей ссылки" rel="nofollow">Название ссылки</a>

..
....


....
Посмотреть статьи других авторов на тему Генераторов кнопок , а также ссылки на другие онлайн-генераторы ,вы можете нажав кнопку -спойлер ниже .


Генератор CSS кнопок(Blogger не для чайников) 

Как создать CSS кнопку (Блоггер не для чайников)

Генератор кнопок CSS (Блогопоиск (BloggerПоиск; www.blogopoisk.ru))

 Простой онлайн-генератор CSS ( Блог Интервенция)

Генератор CSS3

Карусель закладок блоггера2 Css-онлайн .(http://wp-voprosov.net)

Сервис Chimply — бесплатный генератор кнопок,значков.(Все для Blogger) 

Buttons Factory – онлайн-генератор кнопок (Viola's blog)

Сервисы для изготовления кнопок (Азбука блоггера)

 Генераторы CSS3 кода для кнопок (deaction blog)

CSS3 Генератор кнопок для сайта (Dobrovoi)

 http://cooltext.com/Logo-Design-Old-Stone

Онлайн генератор css кнопок (Easy-Code.ru)

http://www.cssbuttongenerator.com/генератор

Ваша кнопка для сайта в бесплатном онлайн генераторе As Button Generator: красиво, быстро и эффектно!

http://vorabota.ru/zdes-mozhno-samostoyatelno-sozdat-knopki-dlya-sayta-v-graficheskom-onlayn-generatore.html генератор

Генератор кнопок онлайн (полезные интернет советы)

http://dabuttonfactory.com/ генератор

http://veraborok.blogspot.com/2011/08/blog-post.html

Создаем динамические кнопочки-ссылки с помощью CSS

Создание универсальных графических кнопок с помощью CSS.(Свобода слова вебмастерского)

 http://dimox.name/dinamic_link_buttons_with_css/

генератор кнопок 
 http://dabuttonfactory.com/

 CSS3 онлайн-генератором,

отсюда взял кнопку для своего блога
 http://shpargalkablog.ru/2012/04/css-knopki.html#on
http://beloweb.ru/dizayn-sayta/top-5-generatorov-css-knopok-dlya-sayta.html
http://www.sciweavers.org/i2style

Генератор кнопок CSS3 c поддержкой линейного градиента


http://dbmast.ru/css3-generator-knopok-dlya-sajta

CSS3 Генератор кнопок для сайта

  Отличный онлайн-генератор кнопок CSS3

  Бесплатные анимированные кнопки для сайта с использованием CSS3

Кнопки | CSS (Шпаргалка блоггера)

Кнопки CSS. Делаем красивые кнопки с картинками .http://serblog.ru

КНОПКИ CSS. ДЕЛАЕМ КРАСИВЫЕ КНОПКИ С КАРТИНКАМИ.http://seogang.ru

Картинка, меняющаяся при наведении курсора. Используем CSS.http://seogang.ru

 Картинка, меняющаяся при наведении курсора. Используем CSS.http://serblog.ru

 


 

 



 

CSS он-лайнИсточник: http://wp-voprosov.net/css-generator.html, Автор: Александр Карташев © wp-voprosov.net
Карусель закладок блоггера #2 — CSS он-лайнИсточник: http://wp-voprosov.net/css-generator.html, Автор: Александр Карташев © wp-voprosov.net
Карусель закладок блоггера #2 — CSS он-лайнИсточник: http://wp-voprosov.net/css-generator.html, Автор: Александр Карташев © wp-voprosov.net
Карусель закладок блоггера #2 — CSS он-лайнИсточник: http://wp-voprosov.net/css-generator.html, Автор: Александр Карташев © wp-voprosov.net
Карусель закладок блоггера #2 — CSS он-лайнИсточник: http://wp-voprosov.net/css-generator.html, Автор: Александр Карташев © wp-voprosov.net
 прятанный текст

.....

 



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

Отправить комментарий