Question

Inca un subiect rapid, dar de tip III

Structura css pentru 2 butoane 3d (unul up, altul down), integrare red & green cu `error` ~ `functions`.

Answer 1

Salut din nou.
.btn-8g
{
background: #fff;
color: #999;
}
.btn-8g:active {
background: #fff;
}
.btn-8g:after,
.btn-8g:before {
text-transform: uppercase;
width: 100%;
height: 100%;
position: absolute;
left: 0;
line-height: 70px;
.btn-8g:after {
top: -98%; // Versiunea Chrome pentru v3+ va cere 100%
background: #7aca7c; // Culoarea cerută
color: #358337; 
content: 'Functions'; // Textul
-webkit-transform-origin: 0% 100%;
-webkit-transform: rotateX(90deg);
-moz-transform-origin: 0% 100%;
-moz-transform: rotateX(90deg);
-ms-transform-origin: 0% 100%;
-ms-transform: rotateX(90deg);
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-8g:before {
top: 100%;
background: #e96a6a;
color: #a33a3a; // Culoarea
content: 'Error'; // Textul
font-weight: 700;
font-family: 'Lato', Calibri, Arial, sans-serif;
-webkit-transform-origin: 0% 0%;
-webkit-transform: rotateX(-90deg);
-moz-transform-origin: 0% 0%;
-moz-transform: rotateX(-90deg);
-ms-transform-origin: 0% 0%;
-ms-transform: rotateX(-90deg);
transform-origin: 0% 0%;
transform: rotateX(-90deg);
}
Urmează efectul functions la rotirea down și error la rotirea up.
.btn-8g.btn-functions3d {
background: #aaa;
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg) translateY(100%);
-moz-transform-origin: 50% 100%;
-moz-transform: rotateX(-90deg) translateY(100%);
-ms-transform-origin: 50% 100%;
-ms-transform: rotateX(-90deg) translateY(100%);
transform-origin: 50% 100%;
transform: rotateX(-90deg) translateY(100%);
}
.btn-8g.btn-error3d  {
background: #aaa;
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg) translateY(-100%);
-moz-transform-origin: 50% 0%;
-moz-transform: rotateX(90deg) translateY(-100%);
-ms-transform-origin: 50% 0%; -ms-transform: rotateX(90deg) translateY(-100%);
transform-origin: 50% 0%;
transform: rotateX(90deg) translateY(-100%);
}
Verde down pe functions și roșu up pe error. Succes!