Наши баннеры и кнопки

<<

lesya_kinoman

Аватара пользователя

Сообщения: 15

Зарегистрирован: 24 фев 2016, 15:01

Откуда: Краснодар

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 24 фев 2016, 19:59

Re: Наши баннеры и кнопки

sv9t писал(а):вспомнил что как то делал кнопку форума для посетителя, восстановлю пост. Выкладываю код и скрин сюда, вдруг понадобится кому:
Открываем гаджет HTML и кидаем весь код в него, сохраняем:
  Код:
<a class="Forum" href="http://bloggerforum.ru" ></a><style type="text/css">a.Forum{width:88px;height:32px;background: url(https://lh5.googleusercontent.com/-Oum49Scf7x8/T5_0T0a2i2I/AAAAAAAAAZ0/eCj2zFsrGq4/s88/BloggerF03.png) no-repeat top left;display: block;}a.Forum:hover{background: url(https://lh5.googleusercontent.com/-Oum49Scf7x8/T5_0T0a2i2I/AAAAAAAAAZ0/eCj2zFsrGq4/s88/BloggerF03.png) no-repeat bottom left;display: block;}</style>

Ваша кнопка, хорошо смотрится в тестовом блоге, у меня на Blogger.
Только я её немного подправила, сделав картинку более прозрачной.
Вот картинка, если кому надо:

Наши баннеры и кнопки

P.s
По вашем коду, можно и свои баннеры создавать, меня картинку и адрес.
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 06 апр 2016, 19:58

Re: Наши баннеры и кнопки

lesya_kinoman писал(а):[b]Ваша кнопка, хорошо смотрится в тестовом блоге, у меня на Blogger.
Только я её немного подправила, сделав картинку более прозрачной.

Красиво получилось. Спасибо.
<<

lesya_kinoman

Аватара пользователя

Сообщения: 15

Зарегистрирован: 24 фев 2016, 15:01

Откуда: Краснодар

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 07 апр 2016, 00:48

Re: Наши баннеры и кнопки

Admin писал(а):Красиво получилось. Спасибо.

Всегда пожалуйста.
Думаю можно ещё добавить, эффект нажатия, как у обычной кнопки "button" или "input".
<<

lesya_kinoman

Аватара пользователя

Сообщения: 15

Зарегистрирован: 24 фев 2016, 15:01

Откуда: Краснодар

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 26 июн 2016, 18:42

Re: Наши баннеры и кнопки

Admin писал(а):Красиво получилось. Спасибо.

Ещё лучше смотрится, если убрать название и оставить только кнопу, а при наведении выводить назване, а так же добавить, что вроде эффекта нажатия.
  Код:
<div class="title" data-title="forum">
<a class="Forum" href="http://bloggerforum.ru/"></div>
</a><style type="text/css">a.Forum{width:88px;height:32px;background: url(http://s019.radikal.ru/i621/1605/1f/cb77d7f9926e.png) no-repeat top left;display: inline-block;}a.Forum:hover{background: url(http://s019.radikal.ru/i621/1605/1f/cb77d7f9926e.png) no-repeat bottom left;display: inline-block;} .title:hover::after { content: attr(data-title); position: absolute; left: 7%; top: 3%; }</style>


  Код:
<a class="Forum" href="href="http://bloggerforum.ru">
</a><style type="text/css">a.Forum{width:88px;height:32px;background: url(/go.php?http://s019.radikal.ru/i621/1605/1f/cb77d7f9926e.png) no-repeat top left;display: inline-block;}a.Forum:hover{background: url(/go.php?http://s019.radikal.ru/i621/1605/1f/cb77d7f9926e.png) no-repeat bottom left;display: inline-block;}
a.Forum:active {
display: block;
margin-top: 2px;
border-radius: 2px solid rgba(131, 22, 8, 0.39);}
</style>

Пример можно посмотреть в посте у меня в тестовом блоге:
/go.php?http://helpmblog.blogspot.ru/2016/06/Blogger-forum.html
<<

Arinka

Аватара пользователя

Сообщения: 4

Зарегистрирован: 03 сен 2016, 17:01

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 17 сен 2016, 16:30

Re: Наши баннеры и кнопки

Баннер установила, спасибо! :)
Красивые они))
Наши баннеры и кнопки
<<

lesya_kinoman

Аватара пользователя

Сообщения: 15

Зарегистрирован: 24 фев 2016, 15:01

Откуда: Краснодар

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 13 окт 2016, 03:57

Re: Наши баннеры и кнопки

Я тут помучилась с вариантом кнопки, но стиль наследуется всем элементами кнопок, если по таком коду поставить несколько кнопок.
Хотела, сделать кнопки-баннеры себе на тестовый блог, но они все наследуют одинаковый стиль :(

P.s
а так кнопка прекрасно работает:
http://cssdeck.com/labs/4dxw4efd
<<

lesya_kinoman

Аватара пользователя

Сообщения: 15

Зарегистрирован: 24 фев 2016, 15:01

Откуда: Краснодар

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 22 окт 2016, 00:37

Re: Наши баннеры и кнопки

Admin писал(а):Красиво получилось. Спасибо.

Как вам моя Баннерная-кнонка?
Прописала к стилям в коде кнопку.
Получилось что вроде вроде Баннерной-кнопки, по клику которой, переходит на ваш форум, в том же окне.


  Код:
<a href="http://bloggerforum.ru">
<button class="Forum"></button></a>
<style type="text/css">
button {
background: url(http://s019.radikal.ru/i624/1610/4f/8641c1ccb2b5.png);
height:36px;
width:92px;
border-radius:1px 1px
}
button:focus {
}
button:hover {
background: url(http://s015.radikal.ru/i333/1610/e7/f297da629eb6.png);
inline-block;
}
</style>


Живой пример:
http://cssdeck.com/labs/4dxw4efd

Можно в двух вариантах с фоном или без.
Наши баннеры и кнопки - http://s019.radikal.ru/i600/1610/09/3bb8aa021f4d.png
Наши баннеры и кнопки - http://s017.radikal.ru/i410/1610/a8/62f5ab69fd0d.png

Наши баннеры и кнопки - http://s019.radikal.ru/i624/1610/4f/8641c1ccb2b5.png
Наши баннеры и кнопки - http://s015.radikal.ru/i333/1610/e7/f297da629eb6.png

Просто выбираем ссылки картинки с фоном или без и заменяем в коде.

Arinka писал(а):Баннер установила, спасибо! :)

А чей баннер поставили, интересно?
Пред.

Вернуться в Ответы на часто задаваемые вопросы

Кто сейчас на конференции

Зарегистрированные пользователи: нет зарегистрированных пользователей

Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo