Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: z-17, Anarki  
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Красивая кнопка "добавить материал" (css3)
Красивая кнопка "добавить материал"
MHДата: Среда, 14.12.2011, 16:40 | Сообщение # 1
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
Новый красивый дизайн кнопки "добавить материал"




Установка:

1) На всех страницах, где используется ссылка "добавить материал" (блог, фотоальбом, новости, статьи и тд) замените:

Code
<?if($ADD_ENTRY_LINK$)?><div style="text-align:right;padding-bottom:4px;">[ <a href="$ADD_ENTRY_LINK$"><!--<s5186>-->Добавить материал<!--</s>--></a> ]</div><?endif?>


На:

Code
<?if($ADD_ENTRY_LINK$)?>
      <a href="$ADD_ENTRY_LINK$" class="a-btn">
      <span class="a-btn-text">ДОБАВИТЬ</span>
      <span class="a-btn-slide-text">новый материал</span>
      <span class="a-btn-icon-right"><span></span></span>
      </a>
      <div style="padding: 5px; clear: both;"></div>      
          <?endif?>


2) Это в css сайта:

Code
.a-btn{      
          background: #454545;      
          background-image: -webkit-linear-gradient(top,#454545,#343434);        
          background-image: -moz-linear-gradient(top,#454545,#343434);        
          background-image: -ms-linear-gradient(top,#454545,#343434);        
          background-image: -o-linear-gradient(top,#454545,#343434);        
          background-image: linear-gradient(top,#454545,#343434);      
          padding-left: 20px;      
          padding-right: 80px;      
          height: 38px;      
          width: 110px;
          display: inline-block;      
          position: relative;      
          border: 1px solid #5d81ab;      
          box-shadow:      
          0px 1px 1px rgba(255,255,255,0.8) inset,      
          1px 1px 3px rgba(0,0,0,0.2),      
          0px 0px 0px 4px rgba(188,188,188,0.5);      
          -moz-box-shadow:      
          0px 1px 1px rgba(255,255,255,0.8) inset,      
          1px 1px 3px rgba(0,0,0,0.2),      
          0px 0px 0px 4px rgba(188,188,188,0.5);      
          -webkit-box-shadow:      
          0px 1px 1px rgba(255,255,255,0.8) inset,      
          1px 1px 3px rgba(0,0,0,0.2),      
          0px 0px 0px 4px rgba(188,188,188,0.5);      
          border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;      
          float: left;      
          clear: both;      
          margin: 10px 0px;      
          overflow: hidden;      
          transition: all 0.3s linear;      
}      
.a-btn-text{
      padding-top: 10px;
      padding-left: 10px;
      display: block;
      font-size: 14px;
      font-face: "Arial";
      white-space: nowrap;
      text-shadow: 0px 1px 1px #000000;
      color: #96a0af;
      font-variant: small-caps;
      font-weight: bold;
}
.a-btn-slide-text{
      position:absolute;
      height: 100%;
      top: 1px;
      right: 52px;
      width: 0px;
      background: #63707e;
      background-image: -webkit-linear-gradient(top,#52606d,#63707e);        
      background-image: -moz-linear-gradient(top,#52606d,#63707e);        
      background-image: -ms-linear-gradient(top,#52606d,#63707e);        
      background-image: -o-linear-gradient(top,#52606d,#63707e);        
      background-image: linear-gradient(top,#52606d,#63707e);      
      text-shadow: 0px 1px 1px #363f49;
      color: #fff;
      font-size: 9px;
      white-space: nowrap;
      text-transform: uppercase;
      text-align: left;
      text-indent: 10px;
      overflow: hidden;
      line-height: 38px;
      box-shadow:
      -1px 0px 1px rgba(255,255,255,0.4),
      1px 1px 2px rgba(0,0,0,0.2) inset;
      -moz-box-shadow:
      -1px 0px 1px rgba(255,255,255,0.4),
      1px 1px 2px rgba(0,0,0,0.2) inset;
      -webkit-box-shadow:
      -1px 0px 1px rgba(255,255,255,0.4),
      1px 1px 2px rgba(0,0,0,0.2) inset;
      transition: width 0.3s linear;
      font-variant: small-caps;
      font-weight: bold;
}
.a-btn-icon-right{
      position: absolute;
      right: 0px;
      top: 0px;
      height: 100%;
      width: 52px;
      border-left: 1px solid #5d81ab;
      box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
      -moz-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
      -webkit-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
      width: 38px;
      height: 38px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -20px 0px 0px -20px;
      background: transparent;
      transition: all 0.3s linear;
}
.a-btn:hover{
      padding-right: 180px;
      box-shadow:
      0px 1px 1px rgba(255,255,255,0.8) inset,
      1px 1px 3px rgba(0,0,0,0.2),
      0px 0px 0px 4px rgba(188,188,188,0.5);
      -moz-box-shadow:
      0px 1px 1px rgba(255,255,255,0.8) inset,
      1px 1px 3px rgba(0,0,0,0.2),
      0px 0px 0px 4px rgba(188,188,188,0.5);
      -webkit-box-shadow:
      0px 1px 1px rgba(255,255,255,0.8) inset,
      1px 1px 3px rgba(0,0,0,0.2),
      0px 0px 0px 4px rgba(188,188,188,0.5);
      text-decoration: none;
      text-shadow: 0px 1px 1px #000000;
}
.a-btn:hover .a-btn-text{
      color: #b5b5b5;
}
.a-btn:hover .a-btn-slide-text{
      width: 125px;
}


Вариант для светлых шаблонов:




Установка точно такая же, только другие стили:

Code
.a-btn{     
     background: #f2f2f2;     
     background-image: -webkit-linear-gradient(top,#f4f4f4,#d2d2d2);     
     background-image: -moz-linear-gradient(top,#f4f4f4,#d2d2d2);     
     background-image: -ms-linear-gradient(top,#f4f4f4,#d2d2d2);     
     background-image: -o-linear-gradient(top,#f4f4f4,#d2d2d2);     
     background-image: linear-gradient(top,#f4f4f4,#d2d2d2);     
     padding-left: 20px;     
     padding-right: 80px;     
     height: 38px;     
     width: 110px;
     display: inline-block;     
     position: relative;     
     border: 1px solid #5d81ab;     
     box-shadow:     
     0px 1px 1px rgba(255,255,255,0.8) inset,     
     1px 1px 3px rgba(0,0,0,0.2),     
     0px 0px 0px 4px rgba(188,188,188,0.5);     
     -moz-box-shadow:     
     0px 1px 1px rgba(255,255,255,0.8) inset,     
     1px 1px 3px rgba(0,0,0,0.2),     
     0px 0px 0px 4px rgba(188,188,188,0.5);     
     -webkit-box-shadow:     
     0px 1px 1px rgba(255,255,255,0.8) inset,     
     1px 1px 3px rgba(0,0,0,0.2),     
     0px 0px 0px 4px rgba(188,188,188,0.5);     
     border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;     
     float: left;     
     clear: both;     
     margin: 10px 0px;     
     overflow: hidden;     
     transition: all 0.3s linear;     
}     
.a-btn-text{
     padding-top: 10px;
     padding-left: 10px;
     display: block;
     font-size: 14px;
     font-face: "Arial";
     white-space: nowrap;
     text-shadow: 0px 1px 1px #ffffff;
     color: #63707c;
     font-variant: small-caps;
     font-weight: bold;
}
.a-btn-slide-text{
     position:absolute;
     height: 100%;
     top: 1px;
     right: 52px;
     width: 0px;
     background: #63707e;
     background-image: -webkit-linear-gradient(top,#52606d,#63707e);     
     background-image: -moz-linear-gradient(top,#52606d,#63707e);     
     background-image: -ms-linear-gradient(top,#52606d,#63707e);     
     background-image: -o-linear-gradient(top,#52606d,#63707e);     
     background-image: linear-gradient(top,#52606d,#63707e);     
     text-shadow: 0px 1px 1px #363f49;
     color: #fff;
     font-size: 9px;
     white-space: nowrap;
     text-transform: uppercase;
     text-align: left;
     text-indent: 10px;
     overflow: hidden;
     line-height: 38px;
     box-shadow:
     -1px 0px 1px rgba(255,255,255,0.4),
     1px 1px 2px rgba(0,0,0,0.2) inset;
     -moz-box-shadow:
     -1px 0px 1px rgba(255,255,255,0.4),
     1px 1px 2px rgba(0,0,0,0.2) inset;
     -webkit-box-shadow:
     -1px 0px 1px rgba(255,255,255,0.4),
     1px 1px 2px rgba(0,0,0,0.2) inset;
     transition: width 0.3s linear;
     font-variant: small-caps;
     font-weight: bold;
}
.a-btn-icon-right{
     position: absolute;
     right: 0px;
     top: 0px;
     height: 100%;
     width: 52px;
     border-left: 1px solid #5d81ab;
     box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
     -moz-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
     -webkit-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
     width: 38px;
     height: 38px;
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -20px 0px 0px -20px;
     background: transparent;
     transition: all 0.3s linear;
}
.a-btn:hover{
     padding-right: 180px;
     box-shadow:
     0px 1px 1px rgba(255,255,255,0.8) inset,
     1px 1px 3px rgba(0,0,0,0.2),
     0px 0px 0px 4px rgba(188,188,188,0.5);
     -moz-box-shadow:
     0px 1px 1px rgba(255,255,255,0.8) inset,
     1px 1px 3px rgba(0,0,0,0.2),
     0px 0px 0px 4px rgba(188,188,188,0.5);
     -webkit-box-shadow:
     0px 1px 1px rgba(255,255,255,0.8) inset,
     1px 1px 3px rgba(0,0,0,0.2),
     0px 0px 0px 4px rgba(188,188,188,0.5);
     text-decoration: none;
     text-shadow: 0px 1px 1px #000000;
}
.a-btn:hover .a-btn-text{
     color: #757575;
}
.a-btn:hover .a-btn-slide-text{
     width: 125px;
}


Все готово!

________________________________________

Материал подготовил - MH
________________________________________

Материалы для дальнейшего чтения:

Как установить кнопки социальных сетей?

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов

http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH


Сообщение отредактировал MH - Воскресенье, 18.12.2011, 15:43
 
djemNaДата: Среда, 14.12.2011, 17:07 | Сообщение # 2
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
Прикольно smile
-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
volfgunusДата: Среда, 14.12.2011, 18:18 | Сообщение # 3
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Quote (djemNa)
Прикольно smile

Ага
MH, у меня только один вопросик.
Почему градиент только под браузеры на webkit сделал?


Сообщение отредактировал volfgunus - Среда, 14.12.2011, 18:20
 
AnarkiДата: Среда, 14.12.2011, 19:14 | Сообщение # 4
Генералиссимус
Сообщений: 2386
Репутация: 162
Социальная репутация:

Статус: Offline
Эх вот настоящий любитель ксс 3.
"Если не можешь сделать сам — по крайней мере, помешай другому."
Карел Чапек

◘ Я снова в деле.. >:D ◘
 
djemNaДата: Среда, 14.12.2011, 19:33 | Сообщение # 5
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
КСС3 это искуство))
-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
MHДата: Среда, 14.12.2011, 20:12 | Сообщение # 6
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
Quote (volfgunus)
Почему градиент только под браузеры на webkit сделал?

опс))) исправил)))

http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH
 
EstennyДата: Среда, 14.12.2011, 21:28 | Сообщение # 7
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Offline
MH, не понимаю, зачем ты это поместил сюда. Не работает (пример твой), нет ни анимации, ни четкости, да и при наведении какая-то ошибка.
 
djemNaДата: Среда, 14.12.2011, 21:42 | Сообщение # 8
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
Quote (Estenny)
Не работает (пример твой)


MH, правда не работает.. sad

-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
EstennyДата: Среда, 14.12.2011, 21:45 | Сообщение # 9
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Offline
djemNa, на той странице, что он скинул её вообще нет, перейди на главную.
 
volfgunusДата: Среда, 14.12.2011, 21:57 | Сообщение # 10
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Estenny, есть, только надо смотреть как пользователь, а не как гость
 
BaniKДата: Среда, 14.12.2011, 22:09 | Сообщение # 11
Полковник
Сообщений: 201
Репутация: 12
Социальная репутация:

Статус: Offline
Кул,
Quote (Estenny)
да и при наведении какая-то ошибка.

все паше

Добавлено (14.12.2011, 22:09)
---------------------------------------------
MH, виложи ше з светлим дизайном кнопку,як в тебе на главной


ВСЕ ДЛЯ КС
 
volfgunusДата: Среда, 14.12.2011, 22:10 | Сообщение # 12
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Quote (BaniK)
MH, виложи ше з светлим дизайном кнопку,як в тебе на главной

BaniK, я тебе открою секрет.
там не светлый стиль, а просто не дописаны стили градиента biggrin
 
EstennyДата: Среда, 14.12.2011, 22:12 | Сообщение # 13
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Offline
BaniK, в Хроме может и пашет. Надо делать кроссбраузерно, хотя бы для последних версий.
 
volfgunusДата: Среда, 14.12.2011, 22:23 | Сообщение # 14
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Estenny, ну градиент теперь MH более менее подправил, осталось остальное проверить и исправить
 
BaniKДата: Среда, 14.12.2011, 22:31 | Сообщение # 15
Полковник
Сообщений: 201
Репутация: 12
Социальная репутация:

Статус: Offline
Estenny, Мозіла 8 в мене, і все норм паше

ВСЕ ДЛЯ КС
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Красивая кнопка "добавить материал" (css3)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: