.icon-button {
    background: -webkit-linear-gradient(318deg, rgba(0, 0, 0, 0.40) 0%, rgba(255, 255, 255, 0.40) 105.18%), #E7EBF0;
    background: linear-gradient(318deg, rgba(0, 0, 0, 0.40) 0%, rgba(255, 255, 255, 0.40) 105.18%), #E7EBF0;
    background-blend-mode: soft-light, normal;
    -webkit-box-shadow: 5px 5px 10px 0px #A6ABBD, -5px -5px 10px 0px #FAFBFF;
    box-shadow: 5px 5px 10px 0px #A6ABBD, -5px -5px 10px 0px #FAFBFF;
    border-radius: 50%;
    font-size: 2.0rem;
    border: 1px solid #FFF; /* Заменяем outline на border */
    margin-left: 7px;
    text-align: center;
    position: relative;
    line-height: 3.6rem;
    height: 3.6rem;
    width: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 0;
}
.icon-button:hover span {
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 3.6rem;
	margin: -1.8rem;
}
.twitter span {
	background-color: #4099ff;
}
.facebook span {
	background-color: #3B5998;
}
.google span {
	background-color: #db5a3c;
}
.dribbble span {
	background-color: #f26798;
}
.skype span {
	background-color: #00aff0;
}
.instagram span {
    background-color: #cd225d;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(106, 20, 123)),color-stop(0.433, rgb(226, 0, 121)),color-stop(1, rgb(243, 105, 21)));
    background-image: -webkit-repeating-linear-gradient(top,rgb(106, 20, 123) 0%,rgb(226, 0, 121) 43.3%,rgb(243, 105, 21) 100%);
    background-image: repeating-linear-gradient(to bottom,rgb(106, 20, 123) 0%,rgb(226, 0, 121) 43.3%,rgb(243, 105, 21) 100%);
    background-image: -ms-repeating-linear-gradient(top,rgb(106, 20, 123) 0%,rgb(226, 0, 121) 43.3%,rgb(243, 105, 21) 100%);
}
.vk span {
	background-color: #2f76a9;
}
.odnoklassniki span {
	background-color: #f66500;
}
.linkedin span {
	background-color: #006599;
}
.pinterest span {
	background-color: #c51218;
}
.vimeo span {
	background-color: #4199c4;
}
.whatsapp span {
	background-color: #29a61a;
}
.telegram span {
	background-color: #2c76b9;
}
.at span {
	background-color: #e05035;
}
.icon-button i {
	background: none;
	color: #ffffff;
	height: 3.6rem;
	left: 0;
	line-height: 3.6rem;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 3.6rem;
	z-index: 10;
}
.icon-button .fa-twitter {
	color: #4099ff;
}
.icon-button .fa-facebook {
	color: #3B5998;
}
.icon-button .fa-google {
	color: #db5a3c;
}
.icon-button .fa-dribbble {
	color: #f26798;
}
.icon-button .fa-skype {
	 color: #00aff0;
}
.icon-button .fa-instagram {
	 color: #aa3495;
}
.icon-button .fa-vk {
	 color: #2f76a9;
}
.icon-button .fa-odnoklassniki {
	 color: #f66500;
}
.icon-button .fa-linkedin {
	 color: #006599;
}
.icon-button .fa-pinterest-p {
	 color: #c51218;
}
.icon-button .fa-vimeo {
	 color: #4199c4;
}
.icon-button .fa-whatsapp {
	 color: #29a61a;
}
.icon-button .fa-telegram {
	 color: #2c76b9;
}
.icon-button .fa-at {
	 color: #e05035;
}
.icon-button:hover .fa {
	color: #ffffff;
}