Файл: iShort-PHP/iShort/css/button.css
Строк: 428
/*
* Button 1
*/
.ishort-btn-1 {
display:
inline-block;
position: relative;
height: 40px;
min-width:
170px;
margin-bottom: 3px;
border: 0;
text-align: left;
outline:
none;
cursor:pointer;
}
.ishort-btn-1:before {
content:
"";
position: absolute;
left: 0;
top: 0;
height:
40px;
width: 30px;
}
.ishort-btn-1 span {
display:
inline-block;
width: 25px;
height: 25px;
background:
#FFF;
position: absolute;
left: 17.5px;
top: 7.5px;
text-align:
center;
font-size: 14px;
line-height: 1.8;
border-radius: 50%
!important;
-moz-border-radius: 50% !important;
-webkit-border-radius:
50% !important;
}
.ishort-btn-1 small {
display: inline-block;
color:
#FFF;
font-size: 14px;
padding:11px 20px;
margin-left:
35px;
}
/*
* Button 2
*/
.ishort-btn-2 {
display:
inline-block;
position: relative;
height: 40px;
min-width:
170px;
margin-bottom: 3px;
border: 0;
text-align: left;
outline:
none;
cursor:pointer;
}
.ishort-btn-2 span {
display:
inline-block;
width: 30px;
height: 40px;
padding-left:
5px;
color: #FFF;
position: absolute;
left: 0px;
top:
0px;
text-align: center;
font-size: 18px;
line-height:
2.2;
}
.ishort-btn-2 span:before {
content: "";
position:
absolute;
left: 35px;
top: 0;
border-top: 40px solid
#139B80;
border-right: 10px solid transparent;
}
.ishort-btn-2 small
{
display: inline-block;
color: #FFF;
font-size: 14px;
padding:11px
20px;
margin-left: 35px;
}
/*
* Button 3
*/
.ishort-btn-3 {
display: inline-block;
position: relative;
height:
37px;
min-width: 170px;
margin-bottom: 3px;
border: 0;
top:
-3px;
text-align: left;
outline:
none;
cursor:pointer;
line-height: 2.2;
border-bottom: 3px
solid #139B80;
}
.ishort-btn-3 span {
display: inline-block;
color:
#FFF;
font-size: 18px;
margin-right: 12px;
margin-left:
30px;
float: left;
}
.ishort-btn-3 small {
display:
inline-block;
color: #FFF;
font-size: 14px;
margin-top: 4px;
}
/*
* Button 4
*/
.ishort-btn-4 {
display:
inline-block;
border: 2px solid #1ABC9C;
background: transparent
!important;
position: relative;
height: 35px;
min-width:
170px;
margin-bottom: 3px;
text-align: left;
outline:
none;
cursor:pointer;
line-height: 2.2;
}
.ishort-btn-4 span
{
display: inline-block;
font-size: 18px;
margin-right:
8px;
margin-left: 30px;
float: left;
}
.ishort-btn-4 small
{
display: inline-block;
font-size: 14px;
margin-top:
4px;
}
/*
* ANIMATIONS
*/
.ishort-btn-1 span i, .ishort-btn-2
span i, .ishort-btn-3 span i, .ishort-btn-4 span i {
-webkit-transition:
all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s
ease;
-o-transition: all .5s ease;
transition: all .5s
ease;
}
.ishort-btn-1:hover span i, .ishort-btn-2:hover span i,
.ishort-btn-3:hover span i, .ishort-btn-4:hover span i
{
-webkit-animation: move_from_top 300ms ease-in-out;
-moz-animation:
move_from_top 300ms ease-in-out;
-ms-animation: move_from_top 300ms
ease-in-out;
-o-animation: move_from_top 300ms ease-in-out;
animation:
move_from_top 300ms ease-in-out;
}
.ishort-btn-1: small, .ishort-btn-2:
small, .ishort-btn-3: small, .ishort-btn-4: small {
-webkit-transition:
all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s
ease;
-o-transition: all .5s ease;
transition: all .5s
ease;
}
.ishort-btn-1:hover small, .ishort-btn-2:hover small,
.ishort-btn-3:hover small, .ishort-btn-4:hover small {
-webkit-animation:
move_from_left 300ms ease-in-out;
-moz-animation: move_from_left 300ms
ease-in-out;
-ms-animation: move_from_left 300ms
ease-in-out;
-o-animation: move_from_left 300ms ease-in-out;
animation:
move_from_left 300ms ease-in-out;
}
/*
* BORDER RADIUS
*/
.radius {
border-radius: 3px;
-moz-border-radius:
3px;
-webkit-border-radius: 3px;
}
.radius:before, .radius span
{
border-radius: 3px 0 0 3px;
-moz-border-radius:
3px;
-webkit-border-radius: 3px 0 0 3px;
}
/*
==========================================================================
COLORS styles
==========================================================================
*/
/*
* Color 1
*/
.color-1 { background-color: #1ABC9C;
}
.color-1.ishort-btn-1:before,
.color-1.ishort-btn-2 span { background:
#139B80; }
.color-1.ishort-btn-1 span,
.color-1.ishort-btn-4 { color:
#1ABC9C; }
.color-1.ishort-btn-2 span:before { border-top-color: #139B80;
}
.color-1.ishort-btn-3 {border-bottom-color: #139B80;
}
.color-1.ishort-btn-4 {border-color: #1ABC9C; }
/*
* Color 2
*/
.color-2 { background-color: #2ecc71;
}
.color-2.ishort-btn-1:before,
.color-2.ishort-btn-2 span { background:
#16A352; }
.color-2.ishort-btn-1 span,
.color-2.ishort-btn-4 { color:
#2ecc71; }
.color-2.ishort-btn-2 span:before { border-top-color: #16A352;
}
.color-2.ishort-btn-3 {border-bottom-color: #16A352;
}
.color-2.ishort-btn-4 {border-color: #2ecc71; }
/*
* Color 3
*/
.color-3 { background-color: #3498db;
}
.color-3.ishort-btn-1:before,
.color-3.ishort-btn-2 span { background:
#1B7CBD; }
.color-3.ishort-btn-1 span,
.color-3.ishort-btn-4 { color:
#3498db; }
.color-3.ishort-btn-2 span:before { border-top-color: #1B7CBD;
}
.color-3.ishort-btn-3 {border-bottom-color: #1B7CBD;
}
.color-3.ishort-btn-4 {border-color: #3498db; }
/*
* Color 4
*/
.color-4 { background-color: #9b59b6;
}
.color-4.ishort-btn-1:before,
.color-4.ishort-btn-2 span { background:
#8533A7; }
.color-4.ishort-btn-1 span,
.color-4.ishort-btn-4 { color:
#9b59b6; }
.color-4.ishort-btn-2 span:before { border-top-color: #8533A7;
}
.color-4.ishort-btn-3 {border-bottom-color: #8533A7;
}
.color-4.ishort-btn-4 {border-color: #9b59b6; }
/*
* Color 5
*/
.color-5 { background-color: #34495e;
}
.color-5.ishort-btn-1:before,
.color-5.ishort-btn-2 span { background:
#1B344D; }
.color-5.ishort-btn-1 span,
.color-5.ishort-btn-4 { color:
#34495e; }
.color-5.ishort-btn-2 span:before { border-top-color: #1B344D;
}
.color-5.ishort-btn-3 {border-bottom-color: #1B344D;
}
.color-5.ishort-btn-4 {border-color: #34495e; }
/*
* Color 6
*/
.color-6 { background-color: #f1c40f;
}
.color-6.ishort-btn-1:before,
.color-6.ishort-btn-2 span { background:
#D8B00E; }
.color-6.ishort-btn-1 span,
.color-6.ishort-btn-4 { color:
#f1c40f; }
.color-6.ishort-btn-2 span:before { border-top-color: #D8B00E;
}
.color-6.ishort-btn-3 {border-bottom-color: #D8B00E;
}
.color-6.ishort-btn-4 {border-color: #f1c40f; }
/*
* Color 7
*/
.color-7 { background-color: #e67e22;
}
.color-7.ishort-btn-1:before,
.color-7.ishort-btn-2 span { background:
#CA6A14; }
.color-7.ishort-btn-1 span,
.color-7.ishort-btn-4 { color:
#e67e22; }
.color-7.ishort-btn-2 span:before { border-top-color: #CA6A14;
}
.color-7.ishort-btn-3 {border-bottom-color: #CA6A14;
}
.color-7.ishort-btn-4 {border-color: #e67e22; }
/*
* Color 8
*/
.color-8 { background-color: #e74c3c;
}
.color-8.ishort-btn-1:before,
.color-8.ishort-btn-2 span { background:
#C92C1C; }
.color-8.ishort-btn-1 span,
.color-8.ishort-btn-4 { color:
#e74c3c; }
.color-8.ishort-btn-2 span:before { border-top-color: #C92C1C;
}
.color-8.ishort-btn-3 {border-bottom-color: #C92C1C;
}
.color-8.ishort-btn-4 {border-color: #e74c3c; }
/*
* Color 9
*/
.color-9 { background-color: #999999;
}
.color-9.ishort-btn-1:before,
.color-9.ishort-btn-2 span { background:
#777777; }
.color-9.ishort-btn-1 span,
.color-9.ishort-btn-4 { color:
#999999; }
.color-9.ishort-btn-2 span:before { border-top-color: #777777;
}
.color-9.ishort-btn-3 {border-bottom-color: #777777;
}
.color-9.ishort-btn-4 {border-color: #999999; }
/*
* Color 10
*/
.color-10 { background-color: #333333;
}
.color-10.ishort-btn-1:before,
.color-10.ishort-btn-2 span {
background: #000000; }
.color-10.ishort-btn-1
span,
.color-10.ishort-btn-4 { color: #333333; }
.color-10.ishort-btn-2
span:before { border-top-color: #000000; }
.color-10.ishort-btn-3
{border-bottom-color: #000000; }
.color-10.ishort-btn-4 {border-color:
#333333; }
/*
* Color 11
*/
.color-11 { background-color:
#1FA6D5; }
.color-11.ishort-btn-1:before,
.color-11.ishort-btn-2 span {
background: #1589B1; }
.color-11.ishort-btn-1
span,
.color-11.ishort-btn-4 { color: #1FA6D5; }
.color-11.ishort-btn-2
span:before { border-top-color: #1589B1; }
.color-11.ishort-btn-3
{border-bottom-color: #1589B1; }
.color-11.ishort-btn-4 {border-color:
#1FA6D5; }
/*
* Color 12
*/
.color-12 { background-color:
#FCC44C; }
.color-12.ishort-btn-1:before,
.color-12.ishort-btn-2 span {
background: #E5AF39; }
.color-12.ishort-btn-1
span,
.color-12.ishort-btn-4 { color: #FCC44C; }
.color-12.ishort-btn-2
span:before { border-top-color: #E5AF39; }
.color-12.ishort-btn-3
{border-bottom-color: #E5AF39; }
.color-12.ishort-btn-4 {border-color:
#FCC44C; }
/*
* Color 13
*/
.color-13 { background-color:
#FC4C7D; }
.color-13.ishort-btn-1:before,
.color-13.ishort-btn-2 span {
background: #E03363; }
.color-13.ishort-btn-1
span,
.color-13.ishort-btn-4 { color: #FC4C7D; }
.color-13.ishort-btn-2
span:before { border-top-color: #E03363; }
.color-13.ishort-btn-3
{border-bottom-color: #E03363; }
.color-13.ishort-btn-4 {border-color:
#FC4C7D; }
/*
* Color 14
*/
.color-14 { background-color:
#E04CFC; }
.color-14.ishort-btn-1:before,
.color-14.ishort-btn-2 span {
background: #C735E2; }
.color-14.ishort-btn-1
span,
.color-14.ishort-btn-4 { color: #E04CFC; }
.color-14.ishort-btn-2
span:before { border-top-color: #C735E2; }
.color-14.ishort-btn-3
{border-bottom-color: #C735E2; }
.color-14.ishort-btn-4 {border-color:
#E04CFC; }
/*
* Color 15
*/
.color-15 { background-color:
#F86227; }
.color-15.ishort-btn-1:before,
.color-15.ishort-btn-2 span {
background: #D6511C; }
.color-15.ishort-btn-1
span,
.color-15.ishort-btn-4 { color: #F86227; }
.color-15.ishort-btn-2
span:before { border-top-color: #D6511C; }
.color-15.ishort-btn-3
{border-bottom-color: #D6511C; }
.color-15.ishort-btn-4 {border-color:
#F86227; }
/*
* Color 16
*/
.color-16 { background-color:
#75AD16; }
.color-16.ishort-btn-1:before,
.color-16.ishort-btn-2 span {
background: #5F8A16; }
.color-16.ishort-btn-1
span,
.color-16.ishort-btn-4 { color: #75AD16; }
.color-16.ishort-btn-2
span:before { border-top-color: #5F8A16; }
.color-16.ishort-btn-3
{border-bottom-color: #5F8A16; }
.color-16.ishort-btn-4 {border-color:
#75AD16; }
/*
==========================================================================
KEYFRAMES
==========================================================================
*/
@-webkit-keyframes move_from_top {
from {
opacity:
0;
-webkit-transform: translateY(60%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes move_from_top {
from {
opacity: 0;
-moz-transform: translateY(60%);
}
to {
opacity:
1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes
move_from_top {
from {
opacity: 0;
-ms-transform:
translateY(60%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
@-o-keyframes move_from_top {
from {
opacity: 0;
-o-transform: translateY(60%);
}
to {
opacity: 1;
-o-transform: translateY(0%);
}
}
@-webkit-keyframes move_from_left {
from {
opacity: 0;
-webkit-transform: translatex(-30%);
}
to
{
opacity: 1;
-webkit-transform: translatex(0%);
}
}
@-moz-keyframes move_from_left {
from {
opacity: 0;
-moz-transform: translatex(-30%);
}
to {
opacity:
1;
-moz-transform: translatex(0%);
}
}
@-ms-keyframes
move_from_left {
from {
opacity: 0;
-ms-transform:
translatex(-30%);
}
to {
opacity: 1;
-ms-transform: translatex(0%);
}
}
@-o-keyframes move_from_left {
from {
opacity: 0;
-o-transform: translatex(-30%);
}
to {
opacity: 1;
-o-transform: translatex(0%);
}
}
@keyframes move_from_left {
from {
opacity: 0;
transform: translatex(-30%);
}
to {
opacity: 1;
transform: translatex(0%);
}
}