Создание кнопки для блога

Приходит время, когда появляется второй сайт и хочется поставить кнопку для перехода. В интернете ничего подходящего не нашла. Почему-то все требуют регистрации, потом нужно скачать неизвестно что а антивирус предупреждает... Подумала, ну и ладно. Вот освою Фотошоп.... А когда я освою Фотошоп???

На shpargalkablog.ru обратила внимание на кнопку. Заинтересовало то, что ее не нужно прорисовывать.

<style type="text/css">
.box1 {
background: #404040;
border-radius: 15px;
box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px,
inset rgba(0,0,0,0.5) -8px -8px 18px 5px;
-webkit-box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px,
inset rgba(0,0,0,0.5) -8px -8px 18px 5px;
font-size: 20px;
text-align: center;
color: #fff;
text-indent: 0px;
padding: 20px 40px;}
</style>
<span class="box1">кнопка CSS</span>

Правда, что с ней делать, не знала. Но решила поэкспериментировать.

Цвет кнопки меняется в background - фон. Черный цвет поменяла на подходящий для моего блога. Вместо Кнопка CSS написала свое  название. По мере написания текста, длина кнопки меняется. Текст можно добавлять и в коде и просто на кнопке. Поменяла размер шрифта font-size: 20px; - на свой. Тут можно поэкспериментировать.

И вот что получилось:

Можно бы было поменять и размеры кнопки в коде и вставить ее как гаджет. Но давайте сделаем её более симпатичной. Сначала с помощью  FsCapture сделаем скриншот нашей кнопки и сохраним ее в виде картинки на своем компьютере. Далее воспользуемся сервисом  http://www.cutmypic.com. Если не разберетесь, посмотрите видео.  Это так красиво и просто.  Пара минут и наша кнопка будет выглядеть более нарядной.

Теперь загрузим ее в файлообменник для получения кода и вставим в боковую панель блога. При этом меняем размер нашей кнопки. Как это сделать можно увидеть Здесь.

В итоге у меня есть кнопка нужного цвета, размера, с моей надписью да еще и тенью. Освоение Фотошопа пока откладывается. Проверяем - все работает!

А когда освоение создания кнопки было закончено, захотелось еще и логотип вставить. Попробуем? Подготовила картинку, загрузила в Picasa. Там же взяла и код для вставки:

1. щелкнула по картинке
2. ссылка на фотографию
3. скрыть ссылку на альбом
4. вставить изображение
5. скопировала код

Код выглядел таким образом: 

<a href="https://picasaweb.google.com/..........png" height="63" width="67" /></a>

Код картинки вставила в код кнопки после ее названия (можно и перед или вместо). Поэкспериментировала с размерами картинки и кнопки. Результат отскринила и загрузила на компьютер. 

В графическом редакторе изменила размер кнопки. Ура!!! Теперь точно наша кнопка будет уникальной.

Не успела дописать статью, как познакомилась с удобным сервисом
Da Button Factory, служащим для создания и настройки внешнего вида кнопок. 

Не сомневаюсь что вам будет тоже интересно познакомиться с  этим онлайн сервисом. Здесь  можно самому задать  форму,  цвет,  размер и текст кнопки, тип и размер шрифта, создать рамку, настроить тень и даже выбрать формат, в котором будет сохранена кнопка (png, gif, jpeg или ico).

Пользоваться этим сервисом  до смешного просто. Не удержалась и себе соорудила очередную кнопку.

А эта кнопка создана  благодаря сервисам Da Button Factory и Сutmypic.com

Кажется, тема кнопок - нескончаема.  Загляните еще на сервис Сooltext.com .  Дополнительный инструмент не помешает.  Он аналогичен предыдущему, но возможностей еще больше.

    

Создайте и вы свою кнопку.

Думаю, такая рабочая кнопочка тоже не помешает:

<a href="Ссылка"><input type="submit" value="Надпись на кнопке" /></a>

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы автоматически узнавать об обновлениях блога, подпишитесь на  RSS-канал

Понравилась статья? Поделитесь с друзьями.