Jump to content

Кнопка с ссылкой

Pashok(one)
Pashok(one)
in ББКоды IP.Board

Featured Replies

Posted
comment_12350

index.php?app=downloads&module=display&s

Название: Кнопка с ссылкой

Добавил: Pashok(one)

Добавлен: 18 Окт 2012

Категория: ББКоды IP.Board

bb код "кнопка", очень удобный, кнопка более заметна чем обычная ссылка.

Для работоспособности кода :

Добавляем данную строку в ipbstyles.css (в самый низ)


.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}

По всем проблемам с бб кодом обращаться ко мне.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/
    Share on other sites
    • Author
    comment_12391

    Обновленно

    Дополнительный скриншот

    f9ffc566.jpg

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12391
    Share on other sites
    comment_12392

    Пробоваю.

    Ни хочет... Как пользоваться? Просто кидаешь и она сама в кнопку? Я правильно понимаю?

    При установке хука:

    Так и должно быть?

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12392
    Share on other sites
    • Author
    comment_12393

    Пробоваю.

    Ни хочет... Как пользоваться? Просто кидаешь и она сама в кнопку? Я правильно понимаю?

    При установке хука:

    Так и должно быть?

    Это bb код выбирай в соответственном меню+залей код css себе в самый низ

    +

    5131d8d1.png

    Внешний вид>bb-коды>в самом низу (скачай последню версию кнопок. я её уже залил

    00d2482a.png

    Вот тут вот устанавливать.

    А далее вот тут выбираешь делаешь всё по инструкции, и воаля кнопка готова!

    b363e2f2.jpg

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12393
    Share on other sites
    comment_12394

    А я как хук устанавливал :dance:

    Чайник чоуш... :sorry:

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12394
    Share on other sites
    • Author
    comment_12395

    А я как хук устанавливал :dance:

    Чайник чоуш... :sorry:

    Как установишь отпишись, мне будет приятно :)

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12395
    Share on other sites
    comment_12396

    Нет. Не робит

    Enkidu 3D Tags Cloud 1.0.2.rar

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12396
    Share on other sites
    • Author
    comment_12398 

    
.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}
    Открой Файл ipbstyles.css
    • Внешний вид >
    • Управление стилями и шаблонами >
    • Управление шаблонами ваш стиль
    • В этом файле : 9bec5670.png
    и добавь в самый низ это : 
    
.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12398
    Share on other sites
    comment_12401

    Ну ни дурак же я, добавил конечно. Только ты пишешь ipbstyle а у меня он ipb_style есть разница? Не думаю.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12401
    Share on other sites
    • Author
    comment_12402

    Ну ни дурак же я, добавил конечно. Только ты пишешь ipbstyle а у меня он ipb_style есть разница? Не думаю.

    кинь ссылку на свой сайт

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12402
    Share on other sites
    comment_12403

    После обновления кеша сама кнопка появилась таки но:

    core.php

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12403
    Share on other sites
    • Author
    comment_12404

    После обновления кеша сама кнопка появилась таки но:

    post-6-0-17607000-1365612433.png

    Измени тему и заного правильно напиши и ссылку на сайт кинь

    Измени тему и заного правильно напиши и ссылку на сайт кинь

    Скачай заного бб_код и поставь по верх того всё должно будет работать

    271f918d.jpg

    Всё работает, переустанови и смотри куда и что прописываешь, пример кода :

    
[download='__ipbmafia.ru']Тест кнопки (NEW)[/download]

    Edited by Pashok(one)

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12404
    Share on other sites
    comment_12405

    :yahoo: :yahoo: :yahoo:

    post-8093-0-71649900-1365664392_thumb.jp

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12405
    Share on other sites
    • Author
    comment_12406

    :yahoo: :yahoo: :yahoo:

    post-8093-0-71649900-1365664392_thumb.jp

    Наконецто :))))

    Админы, del все посты кроме

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12406
    Share on other sites
    comment_12446

    Админы, del все посты кроме #13

    Нет.

    А вообще BB-код бесполезный, по крайней мере мне так кажется.

    Не вижу смысла выделять определенную ссылку как какую-то кнопку, однородным все должно быть.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12446
    Share on other sites
    comment_12485

    Все должно быть однородным, прошу убрать выделение кнопки "скачать":

    post-8496-0-42350300-1365713713_thumb.jp

    Ну вот как-то так. Иногда полезно для красивости сообщения выделять ссылку кнопочкой.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12485
    Share on other sites
    • Author
    comment_12487

    Все должно быть однородным, прошу убрать выделение кнопки "скачать":

    post-8496-0-42350300-1365713713_thumb.jp

    Ну вот как-то так. Иногда полезно для красивости сообщения выделять ссылку кнопочкой.

    Немного не понял, ты говоришь мне изменить стиль кнопки?

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12487
    Share on other sites
    comment_12489

    За кнопку отвечает класс .download_button их ipdownloads.css

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12489
    Share on other sites
    comment_12490

    Мое сообщение было ответом на это:

    А вообще BB-код бесполезный, по крайней мере мне так кажется.

    Не вижу смысла выделять определенную ссылку как какую-то кнопку, однородным все должно быть.

    Ну раз однородным то и "Скачать" надо сделать просто ссылкой.
  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12490
    Share on other sites
    comment_12494

    Все должно быть однородным, прошу убрать выделение кнопки "скачать":

    Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12494
    Share on other sites
    • Author
    comment_12496

    Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

    Вот это ты расписал Оо

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12496
    Share on other sites
    comment_12497

    Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

    Ну а если я хочу так же на дверь повесить ручку только не используя структурных элементов, как то врезанный на заводе беспонтовый замок "крокодил", а красивенькую причиндалину "аллигатор". Разве нельзя? :sorry: А мне нравится, и пользуны мои оценили пользуются (пока правда больше балуются) оне у меня тормоза... Сложно привыкают к новому и хорошему...
  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12497
    Share on other sites
    comment_12510

    Ну так я же написал, к этой ссылке прицепляется класс .download_button, который делает её такой кнопкой. Можно удалить все параметры класса и она будет выглядеть обычной ссылкой.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12510
    Share on other sites
    • 10 месяцев спустя...
    comment_40778

    все хорошо и прекрасно

    вопрос в другом

    я ставлю скачивать файлы на 4-5 ФО

    должна быть альтернатива для людей

    как сообразить кнопки на ФО в бб кодах а не на один?

     

    сейчас вставляю просто по шаблону заготовленому

    спасибо

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=40778
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.