Пользовательский раздел
Мастерская сайта
Создавайте свои скрипты через наш новый мощный HTML-редактор и делитесь с ними со всеми пользователями.
В данном разделе вы можете публиковать все что угодно, и главное не стесняйтесь делиться своим опытом и знаниями.

Если вам хочется с кем-то поделиться своей работой, то пожалуйста, все к вашим услугам.
Материалы которые здесь будут опубликованы не будут браться в основной каталог, это полностью пользовательский раздел сайта.

Ознакомьтесь с правилами, прежде чем добавлять материалы в данный раздел.

Простая социальная кнопка "Вконтакте"

Последнее обновление :

Сегодня поделюсь простой кнопочкой написанной за 5 минут, исключительно для примера, возможно кому-то будет интересно а кто-то и вовсе себе ее заберет.

И так, css-стили :
Код
.but-vk {
  color: #fff;
  background: #4A76A8;
  border-radius: 100px;
  text-decoration: none;
  user-select: none;  
  padding: .3em 0.5em;
  width: 50px;  
  height : 50px;
  border: 0;
}
.but-vk:hover {
  background: #3D6898;
}
.but-vk > i {
  margin-bottom: 0px;
  font-size: 20px;
}
.social-button {
  width: 50px;  
  height : 50px;
}
.social-button:hover button {  
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);  
}  
  .social-button button {  
  transition: all .3s ease;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
}  
  .social-button i {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
}


Ну и сама кнопочка :
Код
<div class="social-button">
<button class="but-vk"><i class="fa fa-vk"></i></button>  
</div>

В кнопочке использовались иконки FontAwesome, если у вас они не установлены, то установите :
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Проверить работоспособность можно в редакторе.


  • Дата публикации

    25.Дек.17 07:51 (Понедельник)

  • Версия скрипта

    Не указано

  • Процесс

    Готово на : 100%

  • Версия скрипта

    Не указано

Теги
Теги не указаны.
Прикрепленные файлы

1 изображение

2 изображение

Комментарии (0)

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация