кнопки с использованием css3 анимаций
кнопки с использованием css3 анимаций-привлекательны и красивы,выполнены они в черно-белом цвете в форме квадратов,имеются несколько стилей,а именно 3,кому какой понравится
Это где нужно видеть кнопки
В ксс это
Это первый стиль кнопок,простой переход в сотые секунды
Это второй.Здесь будет прокручивание кнопки
Это третий.Здесь будут плавное увеличение кнопки
Это где нужно видеть кнопки
Код
<ul class="buttons">
<li><a href="#"><span aria-hidden="true" class="icon-designmodo-settings"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-skype"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-github"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-wordpress"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-joomla"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-tux"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-apple"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-picassa"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-steam"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-html5"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-chrome"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-firefox"></span></a></li>
</ul>
<li><a href="#"><span aria-hidden="true" class="icon-designmodo-settings"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-skype"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-github"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-wordpress"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-joomla"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-tux"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-apple"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-picassa"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-steam"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-html5"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-chrome"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-firefox"></span></a></li>
</ul>
В ксс это
Код
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/icon.css">
<link rel="stylesheet" href="css/icon.css">
Это первый стиль кнопок,простой переход в сотые секунды
Код
.buttons li {
float: left;
margin: 0 10px;
text-align: center;
}
.buttons li a {
position: relative;
display: block;
width: 50px;
height: 37px;
background: #4A4A4A;
color: #fff;
padding-top: 12px;
font-size: 20px;
border-radius: 4px;
box-shadow: 0 2px 0 #1D1D1D;
transition: all .2s;
}
.buttons li a:hover {
background: #6A6A6A;
box-shadow: 0 2px 0 #4D4D4D;
}
.buttons li a:active {
top: 2px;
background: #6A6A6A;
box-shadow: none;
}
float: left;
margin: 0 10px;
text-align: center;
}
.buttons li a {
position: relative;
display: block;
width: 50px;
height: 37px;
background: #4A4A4A;
color: #fff;
padding-top: 12px;
font-size: 20px;
border-radius: 4px;
box-shadow: 0 2px 0 #1D1D1D;
transition: all .2s;
}
.buttons li a:hover {
background: #6A6A6A;
box-shadow: 0 2px 0 #4D4D4D;
}
.buttons li a:active {
top: 2px;
background: #6A6A6A;
box-shadow: none;
}
Это второй.Здесь будет прокручивание кнопки
Код
.buttons li {
float: left;
margin: 0 10px;
text-align: center;
}
.buttons li a {
position: relative;
display: block;
width: 50px;
height: 37px;
background: #4A4A4A;
color: #fff;
padding-top: 12px;
font-size: 20px;
border-radius: 4px;
box-shadow: 0 2px 0 #1D1D1D;
}
.buttons li a:hover {
transition: all .7s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.buttons li a:active {
transition: all .2s;
top: 2px;
background: #6A6A6A;
box-shadow: none;
}
float: left;
margin: 0 10px;
text-align: center;
}
.buttons li a {
position: relative;
display: block;
width: 50px;
height: 37px;
background: #4A4A4A;
color: #fff;
padding-top: 12px;
font-size: 20px;
border-radius: 4px;
box-shadow: 0 2px 0 #1D1D1D;
}
.buttons li a:hover {
transition: all .7s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.buttons li a:active {
transition: all .2s;
top: 2px;
background: #6A6A6A;
box-shadow: none;
}
Это третий.Здесь будут плавное увеличение кнопки
Код
.buttons li {
float: left;
margin: 0 10px;
text-align: center;
}
.buttons li a {
position: relative;
display: block;
width: 50px;
height: 37px;
background: #4A4A4A;
color: #fff;
padding-top: 12px;
font-size: 20px;
border-radius: 4px;
box-shadow: 0 2px 0 #1D1D1D;
transition: all .2s;
}
.buttons li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.buttons li a:active {
top: 2px;
background: #6A6A6A;
box-shadow: none;
}
float: left;
margin: 0 10px;
text-align: center;
}
.buttons li a {
position: relative;
display: block;
width: 50px;
height: 37px;
background: #4A4A4A;
color: #fff;
padding-top: 12px;
font-size: 20px;
border-radius: 4px;
box-shadow: 0 2px 0 #1D1D1D;
transition: all .2s;
}
.buttons li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.buttons li a:active {
top: 2px;
background: #6A6A6A;
box-shadow: none;
}
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: Turbo
Комментарии (0)
