Красивая кнопка "добавить материал"


Красивая кнопка "добавить материал"

3837
8.4 из 10
Проголосовало: 5






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

Установка:

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;  
  }


Все готово!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://MH
  • Всего комментариев: 6

EXido
0
EXido написал: Написано 06 Августа 2014 в 20:18
Комментарий №6
Что исправить для каталога файлов?
У меня сработало только для Блога

GhostlyP
+1
GhostlyP написал: Написано 02 Января 2012 в 21:31
Комментарий №5
"Animated Buttons with CSS3"

Пример 4 (Example 4)

SERPENTSERA
-2
SERPENTSERA написал: Написано 22 Декабря 2011 в 22:10
Комментарий №4
так се

POZ1TIV4IK
-1
POZ1TIV4IK написал: Написано 20 Декабря 2011 в 11:22
Комментарий №3
Гомно(

Dav
0
Dav написал: Написано 18 Декабря 2011 в 21:41
Комментарий №2
------------------->DEMO<--------------------

Lacr1mosa
0
Lacr1mosa написал: Написано 18 Декабря 2011 в 17:56
Комментарий №1
hands красиво

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: