Главная » Статьи » Кнопки

..::Анимированные Кнопки на CSS::..

Посмотрите ДЕМО

Пример Кнопок
Код
<div class="button-row"> <a href="#" class="button rounded gray effect-1">Большааая CSS3 кнопка</a> </div> <div class="button-row"> <a href="#" class="button square blue effect-2">Кнопка</a> <a href="#" class="button square green effect-2">Кнопка</a> <a href="#" class="button square red effect-2">Кнопка</a> </div> <div class="button-row"> <a href="#" class="button rounded blue effect-3">Кнопка</a> <a href="#" class="button rounded green effect-3">Кнопка</a> <a href="#" class="button rounded red effect-3">Кнопка</a> </div> <div class="button-row"> <a href="#" class="button shape-1 blue effect-4">Кнопка</a> <a href="#" class="button shape-1 green effect-4">Кнопка</a> <a href="#" class="button shape-1 red effect-4">Кнопка</a> </div> <div class="button-row"> <a href="#" class="button shape-2 blue effect-5">Кнопка</a> <a href="#" class="button shape-2 green effect-5">Кнопка</a> <a href="#" class="button shape-2 red effect-5">Кнопка</a> </div> <div class="button-row"> <a href="#" class="button rounded blue effect-5">Кнопка</a> <a href="#" class="button square green effect-4">Кнопка</a> <a href="#" class="button shape-1 red effect-3">Кнопка</a> </div>

В CSS
Код
div.button-row { margin: 65px 0; text-align: center; } /* button */ .button { font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #FFFFFF; padding: 10px 75px; margin: 0 20px; text-shadow: 2px 2px 1px #595959; filter: dropshadow(color=#595959, offx=1, offy=1); text-decoration: none; } /* button shapes */ .square { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .rounded { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .shape-1 { -webkit-border-radius: 5px 50px 5px 50px; border-radius: 5px 50px 5px 50px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 50px; -moz-border-radius-bottomleft: 50px; -moz-border-radius-bottomright: 5px; } .shape-2 { -webkit-border-radius: 50px 5px 50px 5px; border-radius: 50px 5px 50px 5px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 50px; } /* button colors */ .blue { border: solid 1px #004F72; background-color: #3BA4C7; background: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); background: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); -webkit-box-shadow: 0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF; } .blue:hover { background-color: #1f97bf; background: -moz-linear-gradient(top, #1f97bf 0%, #0b7396 100%); background: -webkit-linear-gradient(top, #1f97bf 0%, #0b7396 100%); background: -o-linear-gradient(top, #1f97bf 0%, #0b7396 100%); background: -ms-linear-gradient(top, #1f97bf 0% ,#0b7396 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b7396', endColorstr='#0b7396',GradientType=0 ); background: linear-gradient(top, #1f97bf 0% ,#0b7396 100%); } .blue:active { background-color: #1b7694; background: -moz-linear-gradient(top, #1b7694 0%, #0d6380 100%); background: -webkit-linear-gradient(top, #1b7694 0%, #0d6380 100%); background: -o-linear-gradient(top, #1b7694 0%, #0d6380 100%); background: -ms-linear-gradient(top, #1b7694 0% ,#0d6380 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d6380', endColorstr='#0d6380',GradientType=0 ); background: linear-gradient(top, #1b7694 0% ,#0d6380 100%); } .green { border: solid 1px #3b7200; background-color: #88c72a; background: -moz-linear-gradient(top, #88c72a 0%, #709e0e 100%); background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%); background: -o-linear-gradient(top, #88c72a 0%, #709e0e 100%); background: -ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 ); background: linear-gradient(top, #88c72a 0% ,#709e0e 100%); -webkit-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF; } .green:hover { background-color: #7fb52f; background: -moz-linear-gradient(top, #7fb52f 0%, #67910b 100%); background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%); background: -o-linear-gradient(top, #7fb52f 0%, #67910b 100%); background: -ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 ); background: linear-gradient(top, #7fb52f 0% ,#67910b 100%); } .green:active { background-color: #638f22; background: -moz-linear-gradient(top, #638f22 0%, #486608 100%); background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%); background: -o-linear-gradient(top, #638f22 0%, #486608 100%); background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 ); background: linear-gradient(top, #638f22 0% ,#486608 100%); } .red { border: solid 1px #720000; background-color: #c72a2a; background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%); background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%); background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%); background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 ); background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%); -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF; } .red:hover { background-color: #b52f2f; background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%); background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%); background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%); background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 ); background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%); } .red:active { background-color: #8f2222; background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%); background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%); background: -o-linear-gradient(top, #8f2222 0%, #660808 100%); background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 ); background: linear-gradient(top, #8f2222 0% ,#660808 100%); } .gray { border: solid 1px #333333; background-color: #8f8f8f; background: -moz-linear-gradient(top, #8f8f8f 0%, #616161 100%); background: -webkit-linear-gradient(top, #8f8f8f 0%, #616161 100%); background: -o-linear-gradient(top, #8f8f8f 0%, #616161 100%); background: -ms-linear-gradient(top, #8f8f8f 0% ,#616161 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#616161',GradientType=0 ); background: linear-gradient(top, #8f8f8f 0% ,#616161 100%); -webkit-box-shadow: 0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF; } .gray:hover { background-color: #808080; background: -moz-linear-gradient(top, #808080 0%, #545454 100%); background: -webkit-linear-gradient(top, #808080 0%, #545454 100%); background: -o-linear-gradient(top, #808080 0%, #545454 100%); background: -ms-linear-gradient(top, #808080 0% ,#545454 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#545454',GradientType=0 ); background: linear-gradient(top, #808080 0% ,#545454 100%); } .gray:active { background-color: #6b6b6b; background: -moz-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%); background: -webkit-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%); background: -o-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%); background: -ms-linear-gradient(top, #6b6b6b 0% ,#4a4a4a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#4a4a4a',GradientType=0 ); background: linear-gradient(top, #6b6b6b 0% ,#4a4a4a 100%); } /* button effects */ .effect-1 { transition: padding 1s; -webkit-transition: padding 1s; -moz-transition: padding 1s; -o-transition: padding 1s; -ms-transition: padding 1s; } .effect-1:hover { padding: 10px 200px; } .effect-2 { transition: border-radius 2s; -webkit-transition: border-radius 2s; -moz-transition: border-radius 2s; -o-transition: border-radius 2s; -ms-transition: border-radius 2s; } .effect-2:hover { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .effect-3 { transition: border-radius 1s; -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius 1s; } .effect-3:hover { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .effect-4 { transition: border-radius 1s; -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius 1s; } .effect-4:hover { border-radius: 50px 5px 50px 5px; -webkit-border-radius: 50px 5px 50px 5px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 50px; } .effect-5 { transition: border-radius 1s; -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius 1s; } .effect-5:hover { border-radius: 5px 50px 5px 50px; -webkit-border-radius: 5px 50px 5px 50px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 50px; -moz-border-radius-bottomleft: 50px; -moz-border-radius-bottomright: 5px; }
Категория: Кнопки | Добавил: slavick (26.07.2013)
Просмотров: 113 | Теги: css, Анимированные, на, кнопки | Рейтинг: 1.0/5
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]