.v1-1{ border: 5px solid #19283c; background: #19283c; color: #fff; } .v1-1:hover{ border: 5px solid #007374; background: #007374; }
.v1-2{ border: 5px solid #19283c; overflow: hidden; } .v1-2:hover{ color: #fff; } .v1-2:after{ top: 100%; z-index: -1; } .v1-2:hover:after{ top:0; background: #19283c; }
.v1-3{ border: 5px solid #19283c; overflow: hidden; } .v1-3:hover{ color: #fff; } .v1-3:after{ top: -100%; z-index: -1; } .v1-3:hover:after{ top:0; background: #19283c; }
.v1-4{ border: 5px solid #19283c; overflow: hidden; } .v1-4:hover{ color: #fff; } .v1-4:after{ top: 0; left: -100%; z-index: -1; } .v1-4:hover:after{ left:0; background: #19283c; }
.v1-5{ border: 5px solid #19283c; overflow: hidden; } .v1-5:hover{ color: #fff; } .v1-5:after{ top: 0; left: 0; z-index: -1; -webkit-transform:scale(0.6); transform:scale(0.6); } .v1-5:hover:after{ -webkit-transform:scale(1); transform:scale(1); background: #19283c; }
.v1-6{ border: 5px solid #19283c; overflow: hidden; } .v1-6:hover{ color: #fff; } .v1-6:after{ top: 0; left: 0; z-index: -1; } .v1-6:hover:after{ -webkit-transform:scale(2) rotate(180deg); transform:scale(2) rotate(180deg); background: #19283c; }
.v1-7{ border: 5px solid #19283c; overflow: hidden; } .v1-7:hover{ color: #fff; } .v1-7:after{ top: -100%; left: -100%; z-index: -1; } .v1-7:hover:after{ background: #19283c; top: 0; left: 0; }
.v1-8{ border: 5px solid #19283c; overflow: hidden; } .v1-8:hover{ color: #fff; } .v1-8:after{ top: 100%; left: 100%; z-index: -1; } .v1-8:hover:after{ background: #19283c; top: 0; left: 0; }
.v2-1{ border: 5px solid #007374; color: #fff; background: #007374; border-radius: 5px; } .v2-1:hover{ box-shadow: 0px 0px 13px 3px #007374; }
.v2-2{ border: 5px solid #007374; color: #fff; background: #007374; border-radius: 5px; } .v2-2:hover{ top:-15px; box-shadow: 0px 15px 0px 0px #005857; }
.v2-3{ color: #fff; background: #007374; border: 5px solid #007374; box-shadow: 0px 15px 0px 0px #005857; border-radius: 5px; } .v2-3:hover{ top:15px; background: #19283c; border: 5px solid #19283c; box-shadow: 0px 0px 0px 0px #005857; }
.v2-4{ border: 5px solid #007374; color: #fff; background: #007374; border-radius: 5px; } .v2-4:hover{ box-shadow: 0px 3px 0px 0px #003838, 0px 6px 0px 0px #004848, 0px 9px 0px 0px #005858, 0px 12px 0px 0px #006878, 0px 15px 0px 0px #007878; }
.v2-5{ border: 5px solid #007374; color: #fff; background: #007374; border-radius: 5px; } .v2-5:hover{ box-shadow: 6px 6px 0px 0px #004848; }
.v2-6{ border: 5px solid #007374; color: #fff; background: #007374; box-shadow: 6px 6px 0px 0px #004848; border-radius: 5px; } .v2-6:hover{ box-shadow:0 0 0 0 #003838; }
.v2-7{ border: 5px solid #007374; color: #fff; background: #007374; box-shadow: 1px 1px 0px 0px #005857, 2px 2px 0px 0px #005857, 3px 3px 0px 0px #005857, 4px 4px 0px 0px #005857, 5px 5px 0px 0px #005857, 6px 6px 0px 0px #005857, 7px 7px 0px 0px #005857, 7px 7px 3px 0px #ccc; border-radius: 5px; -webkit-transition:all 0s !important; transition:all 0s !important; } .v2-7:hover{ top: 7px; left: 7px; box-shadow:0 0 0 0 #003838; }
.v2-8{ border: 5px solid #007374; color: #fff; background: #007374; box-shadow: 1px 1px 0px 0px #005857, 2px 2px 0px 0px #005857, 3px 3px 0px 0px #005857, 4px 4px 0px 0px #005857, 5px 5px 0px 0px #005857, 6px 6px 0px 0px #005857, 7px 7px 0px 0px #005857, 7px 7px 3px 0px #ccc; border-radius: 20px; -webkit-transition:all 0s !important; transition:all 0s !important; } .v2-8:hover{ top: 7px; left: 7px; box-shadow:0 0 0 0 #003838; }
.v3-1{ color: #fff; border: 5px solid #19283c; background: #19283c; } .v3-1:hover{ letter-spacing: 10px; }
.v3-2{ color: #fff; border: 5px solid #19283c; background: #19283c; } .v3-2:hover{ border: 5px solid #19283c; color:#19283c; background: none; }
.v3-3{ color: #fff; border: 5px solid #19283c; background: #19283c; } .v3-3:hover{ border: 5px solid #19283c; color:#19283c; background: none; } .v3-3:after{ width: 10px; background: #19283c; top: 0; left: 0; -webkit-transition:all 0s !important; transition:all 0s !important; }
.v3-4{ color: #fff; border: 5px solid #19283c; background: #19283c; } .v3-4:hover{ border: 5px solid #19283c; color:#19283c; background: none; } .v3-4:after{ width: 10px; background: #19283c; top: 0; left: 0; -webkit-transition:all 0s !important; transition:all 0s !important; } .v3-4:before{ width: 10px; background: #19283c; top: 0; right: 0; -webkit-transition:all 0s !important; transition:all 0s !important; }
.v3-5{ color: #fff; border: 5px solid #19283c; background: #19283c; } .v3-5:hover{ border: 5px solid #19283c; color:#19283c; background: none; } .v3-5:after{ width: 50%; background: #19283c; top: 0; left: 0; z-index: -1; } .v3-5:hover:after{ width: 10px; } .v3-5:before{ width: 50%; background: #19283c; top: 0; right: 0; z-index: -1; } .v3-5:hover:before{ width: 10px; }
.v3-6{ color: #fff; border: 5px solid #19283c; background: #19283c; } .v3-6:hover{ border: 5px solid #19283c; color:#19283c; background: none; } .v3-6:after{ height: 50%; background: #19283c; top: 0; left: 0; z-index: -1; } .v3-6:hover:after{ height: 10px; } .v3-6:before{ height: 50%; background: #19283c; bottom: 0; right: 0; z-index: -1; } .v3-6:hover:before{ height: 10px; }
.v3-7{ margin: 13px 15px; width: 110px; line-height: 110px; height: 110px; color: #fff; background: #19283c; border-radius: 60px; } .v3-7:hover{ color:#19283c; background: none; } .v3-7:before { bottom: -8.5%; right: -8.5%; z-index: 1; border-radius: 100px; border: 4px solid #19283c; height: 110%; width: 110%; }
.v3-8{ width: 110px; line-height: 110px; height: 110px; color: #fff; background: #19283c; border-radius: 60px; } .v3-8:hover{ color:#19283c; background: none; } .v3-8:before { bottom: -8.5%; right: -8.5%; z-index: 1; border-radius: 100px; border: 4px solid #19283c; height: 110%; width: 110%; } .v3-8:hover:before{ -webkit-transform: rotateY(180deg); }
.v4-1{ border: 5px solid #c0002d; background: #c0002d; color: #fff; box-shadow: 0px 10px 0px 0px #a70128; } .v4-1:hover{ background: none; color: #c0002d; text-indent: 30px; } .v4-1:before{ left: 0; top: 0; z-index: 1; opacity: 0; width: 0px; content: '¥'; } .v4-1:hover:before{ text-indent: 0px; color: #fff; opacity: 1; width: 30px; background: #c0002d; }
.v4-2{ border: 5px solid #c0002d; background: #c0002d; color: #fff; box-shadow: 0px 10px 0px 0px #a70128; } .v4-2:hover{ background: none; color: #c0002d; text-indent: 30px; } .v4-2:before{ left: 0; top: 0; z-index: 1; opacity: 0; width: 0px; content: '★'; font-size: 13px; } .v4-2:hover:before{ text-indent: 0px; color: #fff; opacity: 1; width: 30px; background: #c0002d; }
.v4-3{ border: 5px solid #c0002d; background: #c0002d; color: #fff; overflow: hidden; box-shadow: 0px 10px 0px 0px #a70128; } .v4-3:hover{ background: none; color: #c0002d; } .v4-3:before { left: 0; top: 0; width: 30px; height: 120px; background: none; -webkit-transition:all 0.5s !important; transition:all 0.5s !important; -webkit-transform: translate(-60px,-30px) rotate(45deg); transform: translate(-60px,-30px) rotate(45deg); } .v4-3:hover:before { background: #fff; -webkit-transform: translate(280px,-30px) rotate(45deg); transform: translate(280px,-30px) rotate(45deg); }
.v4-4{ border: 5px solid #c0002d; background: none; color: #c0002d; overflow: hidden; box-shadow: 0px 10px 0px 0px #a70128; } .v4-4:hover{ background: #c0002d; color: #c0002d; color:#fff; } .v4-4:before { left: 0; top: 0; width: 30px; height: 120px; background: #c0002d; -webkit-transition:all 0.5s !important; transition:all 0.5s !important; -webkit-transform: translate(-50px,-30px) rotate(45deg); transform: translate(-50px,-30px) rotate(45deg); } .v4-4:hover:before { background: rgba(255,255,255,0.5); -webkit-transform: translate(260px,-30px) rotate(45deg); transform: translate(260px,-30px) rotate(45deg); } .v4-4:after { left: 0; top: 0; width: 30px; height: 120px; background: #c0002d; -webkit-transition:all 0.5s !important; transition:all 0.5s !important; -webkit-transform: translate(260px,-30px) rotate(45deg); transform: translate(260px,-30px) rotate(45deg); } .v4-4:hover:after { background: rgba(255,255,255,0.5); -webkit-transform: translate(-50px,-30px) rotate(45deg); transform: translate(-50px,-30px) rotate(45deg); }
.v4-5{ border: 5px solid #c0002d; background: none; color: #c0002d; overflow: hidden; box-shadow: 0px 10px 0px 0px #a70128; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; perspective: 300px; transform-style: preserve-3d; } .v4-5:hover{ color: #fff; } .v4-5:after { left: 0; top: -10%; z-index: -1; background: #c0002d; -webkit-transform-origin: center top; -webkit-transform: rotateX(-90deg); transform-origin: center top; transform: rotateX(-90deg); } .v4-5:hover:after { top: 0; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
.v4-6{ border: 5px solid #c0002d; background: none; color: #fff; box-shadow: 0px 10px 0px 0px #a70128; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; perspective: 300px; transform-style: preserve-3d; } .v4-6:hover{ color: #c0002d; } .v4-6:after { left: 0; top: 0; z-index: -1; background: #c0002d; -webkit-transform-origin: center bottom; -webkit-transform: rotateX(0); transform-origin: center bottom; transform: rotateX(0); } .v4-6:hover:after { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); }
.v4-7{ overflow: hidden; border: 5px solid #c0002d; background: none; color: #fff; box-shadow: 0px 10px 0px 0px #a70128; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; perspective: 300px; transform-style: preserve-3d; } .v4-7:hover{ color: #c0002d; } .v4-7:after { left: 0; top: 0; z-index: -1; background: #c0002d; -webkit-transform-origin: center left; -webkit-transform: rotateY(0deg); transform-origin: center left; transform: rotateY(0deg); } .v4-7:hover:after { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.v4-8{ overflow: hidden; border: 5px solid #c0002d; background: none; color: #fff; box-shadow: 0px 10px 0px 0px #a70128; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; perspective: 300px; transform-style: preserve-3d; } .v4-8:after { right: 0; top: 0; z-index: -1; background: #c0002d; -webkit-transform-origin: center center; -webkit-transform: rotateY(0deg); -webkit-transform-origin: center center; -webkit-transform: rotateY(0deg); } .v4-8:hover:after { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.v5-1{ color: #19283c; border: 5px solid #19283c; text-shadow: 0px 1px 0px #eee, 0px 2px 0px #eee, 0px 3px 0px #ddd, 0px 4px 0px #ddd, 0px 5px 0px #ddd, 0px 6px 0px #ddd, 0px 7px 0px #ddd; } .v5-1:hover{text-shadow:1px 1px 0px #ddd}
.v5-2{ color: #19283c; border: 5px solid #19283c; } .v5-2:hover{ text-shadow: 0px 1px 0px #eee, 0px 2px 0px #eee, 0px 3px 0px #ddd, 0px 4px 0px #ddd, 0px 5px 0px #ddd, 0px 6px 0px #ddd, 0px 7px 0px #ddd; }
.v5-3{ color: #19283c; border: 5px solid #19283c; } .v5-3:hover{color: #007374;border: 5px solid #007374;}
.v5-4{ overflow: hidden; color: #19283c; border: 5px solid #19283c; text-indent:0; } .v5-4:hover{text-indent:310px;} .v5-4:after{ color: #19283c; left: 0; top: 0; content: 'HOVER'; text-indent: -310px; } .v5-4:hover:after{ text-indent: 0px; }
.v5-5{ overflow: hidden; color: #19283c; border: 5px solid #19283c; text-indent:-310px; } .v5-5:hover{text-indent:310px;} .v5-5:after{ color: #19283c; left: 0; top: 0; content: 'LEFT'; text-indent: -620px; } .v5-5:hover:after{ text-indent: 0px; } .v5-5:before{ color: #19283c; left: 0; top: 0; content: 'RIGHT'; text-indent: 0px; } .v5-5:hover:before{ text-indent: 620px; }
.v5-6{ overflow: hidden; color: #19283c; border: 5px solid #19283c; } .v5-6:after { color: #19283c; left: 8px; top: 8px; content: ''; height: 40px; width: 220px; border: 2px solid #19283c; opacity: 0; } .v5-6:hover:after { opacity: 1; }
.v5-7{ overflow: hidden; color: #19283c; border: 2px solid #19283c; height: 65px; line-height: 65px; width: 245px; } .v5-7:hover{ border: 2px dashed #19283c; }
.perspective a{ color:#fff; width: 240px; height: 60px; display: block; } .perspective{ -webkit-transition:all 0.3s !important; transition:all 0.3s !important; } .persfront{ -webkit-transform-origin: center bottom; -webkit-transform: rotateX(0deg); transform-origin: center bottom; transform: rotateX(0deg); } .persback{ -webkit-transform-origin: center top; -webkit-transform: rotateX(-90deg); transform-origin: center top; transform: rotateX(-90deg); } .v5-8{ -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; } .v5-8 .persfront a{ background:#19283c; border: 5px solid #19283c; } .v5-8 .persback a{ background: #071421; border: 5px solid #071421; } .v5-8:hover .persfront{ -webkit-transform: rotateX(90deg); transform: rotateX(90deg); margin: -70px 0 0 0; } .v5-8:hover .persback{ -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }