css按钮按下去有框,CSS角落框/按钮

css

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font: inherit;

font-size: 100%;

vertical-align: baseline;

}

html {

line-height: 1;

}

ol, ul {

list-style: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

vertical-align: middle;

}

q, blockquote {

quotes: none;

}

q:before, q:after, blockquote:before, blockquote:after {

content: "";

content: none;

}

a img {

border: none;

}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {

display: block;

}

*,

*:after,

*:before {

box-sizing: border-box;

}

html, body {

height: 100%;

}

html {

font-size: 62.5%;

}

.clearfix:before, .clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.sepa {

width: 90%;

height: 1px;

margin: 0px auto;

border-top: 1px dashed #ecf0f1;

}

.noselect {

-moz-user-select: -moz-none;

-webkit-user-select: none;

-ms-user-select: none;

user-select: none;

}

.pause-anim {

-webkit-animation-play-state: paused !important;

animation-play-state: paused !important;

}

@-webkit-keyframes svg_outline {

100% {

stroke-dashoffset: 0;

}

}

@keyframes svg_outline {

100% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes svg_outline_hide {

0% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

stroke-width: 0;

}

}

@keyframes svg_outline_hide {

0% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

stroke-width: 0;

}

}

@-webkit-keyframes svg_fill_active {

100% {

fill: #e25027;

fill-opacity: 1;

}

}

@keyframes svg_fill_active {

100% {

fill: #e25027;

fill-opacity: 1;

}

}

@-webkit-keyframes svg_fill_inactive {

100% {

fill: #ebebeb;

fill-opacity: 1;

}

}

@keyframes svg_fill_inactive {

100% {

fill: #ebebeb;

fill-opacity: 1;

}

}

@-webkit-keyframes svg_stroke_inactive {

100% {

stroke: #ebebeb;

}

}

@keyframes svg_stroke_inactive {

100% {

stroke: #ebebeb;

}

}

@-webkit-keyframes svg_stroke_active {

100% {

stroke: #e25027;

}

}

@keyframes svg_stroke_active {

100% {

stroke: #e25027;

}

}

body {

font-family: 'Electrolize', sans-serif;

background: #070707;

overflow: hidden;

}

.wrapper {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 100%;

text-align: center;

}

.bttn {

display: inline-block;

vertical-align: middle;

position: relative;

margin: 20px;

}

.bttn span {

display: block;

padding: 30px;

font-size: 30px;

color: #FFB902;

text-transform: uppercase;

transition: all 0.3s ease-out;

}

.bttn:hover {

cursor: pointer;

}

.bttn.out .corners {

position: absolute;

width: 100%;

transition-duration: 0.3s;

}

.bttn.out .corners:before, .bttn.out .corners:after {

content: '';

position: absolute;

width: 7px;

height: 7px;

border-color: cyan;

border-style: solid;

transition-duration: 0.3s;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

.bttn.out .corners.top:before {

border-width: 1px 0 0 1px;

}

.bttn.out .corners.top:after {

border-width: 1px 1px 0 0;

}

.bttn.out .corners.bottom:before {

border-width: 0 0 1px 1px;

}

.bttn.out .corners.bottom:after {

border-width: 0 1px 1px 0;

}

.bttn.out .corners:before {

left: 0;

}

.bttn.out .corners:after {

right: 0;

}

.bttn.out .corners.top {

top: 0;

}

.bttn.out .corners.bottom {

bottom: 7px;

}

.bttn.out:hover .corners:before {

left: 20px;

}

.bttn.out:hover .corners:after {

right: 20px;

}

.bttn.out:hover .corners.top {

top: 20px;

}

.bttn.out:hover .corners.bottom {

bottom: 27px;

}

.bttn.in .corners {

position: absolute;

width: 100%;

transition-duration: 0.3s;

}

.bttn.in .corners:before, .bttn.in .corners:after {

content: '';

position: absolute;

width: 7px;

height: 7px;

border-color: #FFB902;

border-style: solid;

transition-duration: 0.3s;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

.bttn.in .corners.top:before {

border-width: 1px 0 0 1px;

}

.bttn.in .corners.top:after {

border-width: 1px 1px 0 0;

}

.bttn.in .corners.bottom:before {

border-width: 0 0 1px 1px;

}

.bttn.in .corners.bottom:after {

border-width: 0 1px 1px 0;

}

.bttn.in .corners:before {

left: 20px;

}

.bttn.in .corners:after {

right: 20px;

}

.bttn.in .corners.top {

top: 20px;

}

.bttn.in .corners.bottom {

bottom: 27px;

}

.bttn.in:hover .corners:before {

left: 0;

}

.bttn.in:hover .corners:after {

right: 0;

}

.bttn.in:hover .corners.top {

top: 0;

}

.bttn.in:hover .corners.bottom {

bottom: 7px;

}

.bttn.cyan span {

color: cyan;

}

.bttn.cyan .corners:after, .bttn.cyan .corners:before {

border-color: cyan;

}

.box {

display: inline-block;

vertical-align: middle;

position: relative;

max-width: 20%;

}

.box .content {

margin: 20px;

padding: 20px;

border: 1px dashed rgba(0, 255, 255, 0.5);

color: cyan;

font-size: 14px;

line-height: 1.3;

}

.box .corners {

position: absolute;

width: 100%;

transition-duration: 0.3s;

}

.box .corners:before, .box .corners:after {

content: '';

position: absolute;

width: 7px;

height: 7px;

border-color: cyan;

border-style: solid;

transition-duration: 0.3s;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

.box .corners.top:before {

border-width: 1px 0 0 1px;

}

.box .corners.top:after {

border-width: 1px 1px 0 0;

}

.box .corners.bottom:before {

border-width: 0 0 1px 1px;

}

.box .corners.bottom:after {

border-width: 0 1px 1px 0;

}

.box .corners:before {

left: 0;

}

.box .corners:after {

right: 0;

}

.box .corners.top {

top: 0;

}

.box .corners.bottom {

bottom: 7px;

}

.box:hover .corners:before {

left: 20px;

}

.box:hover .corners:after {

right: 20px;

}

.box:hover .corners.top {

top: 20px;

}

.box:hover .corners.bottom {

bottom: 27px;

}

@-webkit-keyframes fadeIn {

from {

opacity: 0;

-webkit-transform: translateY(50%);

transform: translateY(50%);

}

to {

opacity: 1;

-webkit-transform: translateY(0%);

transform: translateY(0%);

}

}

@keyframes fadeIn {

from {

opacity: 0;

-webkit-transform: translateY(50%);

transform: translateY(50%);

}

to {

opacity: 1;

-webkit-transform: translateY(0%);

transform: translateY(0%);

}

}