html阴影角度,CSS3 按钮的斜角阴影效果

CSS

语言：

CSSSCSS

确定

:root {

box-sizing: border-box;

margin: 30px;

}

.box-shadow {

padding: 20px 40px;

max-width: 300px;

}

.button-shadow {

text-decoration: none;

padding: 10px 20px;

margin: 20px;

border: 3px solid #c21622;

}

.button-shadow:after {

background-color: #c21622 !important;

}

.button-shadow:hover {

top: 5px;

box-shadow: none;

}

.button-shadow:hover:after {

position: absolute;

top: 0em;

right: 0em;

left: 0em;

bottom: 0em;

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.button-shadow:active {

background-color: #c21622;

color: #fff;

-webkit-transition: color 200ms, background-color 200ms;

transition: color 200ms, background-color 200ms;

}

.shadow {

-webkit-transition: all 100ms;

transition: all 100ms;

font-family: 'Futura', Helvetica;

font-size: 1.2rem;

background-color: #f2f2f2;

color: #000;

position: relative;

box-shadow: 4px 4px 3px 0px rgba(50, 50, 50, 0.05);

}

.shadow:after {

-webkit-transition: all 100ms;

transition: all 100ms;

content: "";

display: block;

z-index: -1;

background-color: #f9c132;

position: absolute;

top: 0.5em;

right: -0.4em;

left: 0.4em;

bottom: -0.4em;

-webkit-transform: rotate(1.5deg);

-ms-transform: rotate(1.5deg);

transform: rotate(1.5deg);

}