ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивое оформление кнопки Соц.сетей

Красивое оформление кнопки Соц.сетей

Красивые и необычные по дизайну представлены здесь варианты по оформлению кнопок с помощью CSS, где у каждой версий своя необычная анимация. Также представлены ссылки, чтоб можно было подключить, это для того, чтоб поделиться материалом или перейти на свою страницу или сообщество. Так как если брать прямые ссылки, то здесь не чего сложного нет, ведь переход идет по ссылки.

А вот если поделиться, то сам ссылки немного сложнее нужно прописывать, ведь еще требуется направить свой адрес, это с какой страницы вы делитесь материалом. Вот как раз они ниже предоставлены на самые актуальные социальные площадки. Учитывая широкую популярность на интеграцию с социальными сетями, то эта функция становится не просто как еще одна функция для раздачи нового материала по разным социальным площадкам.

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

Порядок для установки ссылок в социальных сетях:

ВКонтакте

Код

<a href="#vk" onclick="window.open('https://vk.com/share.php?url='+ window.location.href +'')">ВКонтакте</a>

Одноклассники

Код

<a href="#ok" onclick="window.open('https://connect.ok.ru/offer?url='+ window.location.href +'')">Одноклассники</a>

Facebook

Код

<a href="#facebook" onclick="window.open('https://www.facebook.com/sharer.php?src=sp&u='+ window.location.href +'')">Facebook</a>

Twitter

Код

<a href="#twitter" onclick="window.open('https://twitter.com/intent/tweet?url='+ window.location.href +'')">Twitter</a>

Несколько вариантов оформление для кнопок:

Здесь нужно подчеркнуть, что все варианты, что здесь представлены используют шрифт FontAwesome, но в аналогичном порядке есть варианты для подключение графических иконк, что виде смайла представлено.

Первый вариант:

Социальные сети, иконочный набор

HTML

Код

CSS

Код

.kapesonal-dapproacn-cugomes {
  padding: 0;
  list-style: none;
  margin: 5px;
}
.kapesonal-dapproacn-cugomes li {
  display: inline-block;
  position: relative;
  font-size: 25px;
}
.kapesonal-dapproacn-cugomes i, .kapesonal-dapproacn-cugomes img {
  color: #f3f0f0;
  position: absolute;
  top: 18.8px;
  left: 17.8px;
  width: 23px;
  height: 23px;
  text-align: center;
  transition: all 0.5s ease-out;
}
.kapesonal-dapproacn-cugomes a {
  display: inline-block;
}
.kapesonal-dapproacn-cugomes a:before {
  transform: scale(1);
  content: "";
  width: 59px;
  height: 59px;
  border-radius: 100%;
  display: block;
  background: linear-gradient(45deg, #296394, #2168a5);
  box-shadow: 0 2px 5px rgba(14, 14, 14, 0.31), 0 2px 4px rgba(19, 18, 18, 0.21);
  transition: all 0.5s ease-out;
}
.kapesonal-dapproacn-cugomes a:hover:before {
  transform: scale(0);
  transition: all 0.5s ease-in;
}
.kapesonal-dapproacn-cugomes a:hover i,
.kapesonal-dapproacn-cugomes a:hover img {
  transform: scale(1.8);
  color: #2773b5;
  transition: all 0.5s ease-in;
}

Демонстрация

Второй вариант:

Красивый набор социальный кнопок

HTML

Код

CSS

Код

.maykasu-magesanu-stomed {
  padding: 0;
  list-style: none;
  margin: 10px;
}
.maykasu-magesanu-stomed li {
  display: inline-block;
  position: relative;
}
.maykasu-magesanu-stomed li a {
  width: 59px;
  height: 59.7px;
  display: inline-block;
  text-align: center;
  margin: 0 4px;
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 0 8px 12px rgba(19, 18, 18, 0.32);
  background: linear-gradient(0deg, #d8d1d1, #fff);
  transition: .5s;
}
.maykasu-magesanu-stomed li a:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  color: #000;
}
.maykasu-magesanu-stomed li a i {
  display: block;
  background: linear-gradient(0deg, #f9f9f9, #c7c5c5);
  border-radius: 50%;
  padding: 12px;
  font-size: 24px;
  color: #6b6868;
  transition: .5s;
  width: 24px;
  height: 24px;
  position: absolute;
  box-sizing: content-box;
}
.maykasu-magesanu-stomed li a:hover i {
  color: #337AB7;
}
.maykasu-magesanu-stomed li a img {
  width: 25px;
  height: 25px;
}

Демонстрация

Третий вариант:

Скрипт для сайта на социальные иконки

HTML

Код

CSS

Код

.gasemadev-nabosim-pasenem {
  list-style: none;
  margin: 10px;
  padding: 0;
  display: flex;
  justify-content: center;
}
.gasemadev-nabosim-pasenem a {
  text-decoration: none;
  color: #e6e6e6;
  width: 58px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  margin: 0 5px;
  font-size: 26px;
  background: #1b629e;
  transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
  transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
  transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
}
.gasemadev-nabosim-pasenem a img {
  width: 25px;
  height: 25px;
}
.gasemadev-nabosim-pasenem a i,
.gasemadev-nabosim-pasenem a img {
  transition: transform 0.4s linear 0s;
}
.gasemadev-nabosim-pasenem a:hover {
  transform: rotate(360deg);
  border-radius: 50%;
}
.gasemadev-nabosim-pasenem a:hover i,
.gasemadev-nabosim-pasenem a:hover img {
  transform: rotate(-360deg);
}

После как выберете стиль, то нужно установить, как все сделаете, то добавление функционала для обмена заданной информацией в социальных сетях и следующие функции для всех ваших сообщений, станет доступным и обычным способом, это по клику появится окно или новая страница с данными, которые нужно отправлять.

Демонстрация
Источник: Atuin.ru

12 Января 2019 Просмотров: 1170 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0