• Телефон +38 (068) 652-97-37
  • Часы работы Ежедневно с 08:00 до 20:00

Обратный звонок

Оставьте номер своего телефона, и мы перезвоним вам в удобное для вас время


Я согласен(а) на обработку персональных данных

Главная Красивая кнопка "добавить материал" - Форум
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Архив - только для чтения
Форум » Архив (закрытые темы) » Корзина » Красивая кнопка "добавить материал"
Красивая кнопка "добавить материал"

[Table]Новый красивый дизайн кнопки "добавить материал"
[/Table]
[Table]Установка: [/Table]

[Table]1) На всех страницах, где используется ссылка "добавить материал" (блог, фотоальбом, новости, статьи и тд) замените[/Table]:
Code
<?if($ADD_ENTRY_LINK$)?><div style="text-align:right;padding-bottom:4px;">[ <a href="$ADD_ENTRY_LINK$"><!--<s5186>-->Добавить материал<!--</s>--></a> ]</div><?endif?>

[Table]На:[/Table]
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?>

[Table]2) Это в css сайта:[/Table]
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;   
   }
Сообщение # 1 | Сб, 2011-12-31 в 12:21:03
профиль
Классно, спасибо yes
Сообщение # 2 | Вт, 2012-01-03 в 22:45:41
профиль
yes четко
Сообщение # 3 | Пт, 2012-01-06 в 15:56:55
профиль
Форум » Архив (закрытые темы) » Корзина » Красивая кнопка "добавить материал"
  • Страница 1 из 1
  • 1
Поиск: