<a class="btn2" href="#"><span>Текст кнопки</span></a>
.btn2 {
overflow: hidden;
background: rgb(176, 12, 12);
color: white;
height: 35px;
line-height: 35px;
width: 130px;
display: block;
text-align:center;
font-family: arial;
font-size: 16px;
text-decoration: none;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn2:before {
content: '';
background: url('http://ktvd.ru/wp-content/uploads/phone.png') top left no-repeat;
width: 15px;
height: 15px;
display: inline-block;
position: absolute;
top:6px;
left:-20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn2:hover:before {
left:6px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn2 span {
margin-left: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn2:hover span {
margin-left: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.