• Страница 1 из 1
  • 1
Форум » Веб-разработка » Вопросы по uCoz » Вопросы по анимации кнопок
Вопросы по анимации кнопок
Riechst
Дата: Пятница, 2018-11-23, 21:31 | Сообщение 1
Пользователи
Сообщений:2
Награды: 0


Наткнулся у вас тут на всякие скрипты и прочее по юкозу. Интересует анимация кнопок. Если css ещё ясно, то что по html куда это вписывать??))

Вот к примеру:

Материал: http://zornet.ru/forum/93-7318-1
Страна: (RU)
Kosten
Дата: Пятница, 2018-11-23, 22:05 | Сообщение 2
Администраторы
Сообщений:18866
Награды: 55


Riechst, представлено 3 эффекта на кнопки, если говорить про первый, то вот код и стили под него, основа для всех одинакова, а эффект у каждого свой.



Код

Код
<button class="bexceptionak-lydexciting"><span>Оригинальный дизайн</span></button>


CSS

Код
.bexceptionak-lydexciting {
    border: 1.8px solid #a79f9f;
    background: #f5f0f0;
    display: inline-block;
    padding: 15px 23px;
    margin: 10px;
    font: normal 18px 'Lato', sans-serif;
    border-radius: 35px;
    cursor: pointer;
    position: relative;
    outline: none;
    text-decoration: none;
    color: #464343;
    overflow: hidden;
    z-index: 100;
    transition: all .4s;
    box-shadow: 0px 4px 10px rgba(45, 41, 41, 0.19), 0px 10px 30px -15px rgba(43, 41, 41, 0.15);
}

.bexceptionak-lydexciting > span{
  position: relative;
  display: block;
  z-index: 100;
}

.bexceptionak-lydexciting:before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background: #8e1183;
    top: 0;
    left: 0;
    -webkit-transform: skew(-10deg) translate3d(-103%,0,0);
    transform: skew(-10deg) translate3d(-103%,0,0);
    border-right: 1px solid #8e1188;
    transition: all .5s;
}

.bexceptionak-lydexciting:hover {
    color: #f9f3f3;
    background: #bc31aa;
}

.bexceptionak-lydexciting:hover:before{
  -webkit-transform: skew(-10deg) translate3d(-50%,0,0);
  transform: skew(-10deg) translate3d(-50%,0,0);
}


Демонстрация
Прикрепления: 7119809.png(11.5 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2018-11-23, 22:06 | Сообщение 3
Администраторы
Сообщений:18866
Награды: 55


Цитата Riechst ()
Если css ещё ясно, то что по html куда это вписывать??))

Там где хотите видеть кнопку.
Страна: (RU)
Riechst
Дата: Пятница, 2018-11-23, 22:17 | Сообщение 4
Пользователи
Сообщений:2
Награды: 0


это понятно. меня интересует другое. Есть кнопки Новая тема Новый опрос и т.д. Через настройки им можно сменить картинку, но меня интересует анимация этих кнопок. В каком разделе все эти дела прописывают? Вид материалов?
Страна: (RU)
Kosten
Дата: Пятница, 2018-11-23, 23:00 | Сообщение 5
Администраторы
Сообщений:18866
Награды: 55


Цитата Riechst ()
Есть кнопки Новая тема Новый опрос и т.д


Не разу не встречал, чтоб можно было стили подключить.
Страна: (RU)
waak
Дата: Суббота, 2018-11-24, 17:27 | Сообщение 6
Друзья сайта
Сообщений:499
Награды: 13


Цитата Riechst ()
В каком разделе все эти дела прописывают? Вид материалов?


Анимация кнопок или других элементов это просто css стили и их можно подключить как простой css код в свою таблицу стилей


http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz
Страна: (RU)
Форум » Веб-разработка » Вопросы по uCoz » Вопросы по анимации кнопок
  • Страница 1 из 1
  • 1
Поиск: