excalibur
Version:
Excalibur.js is a simple JavaScript game engine with TypeScript bindings for making 2D games in HTML5 Canvas. Our mission is to make web game development as simple as possible.
125 lines (111 loc) • 2.32 kB
CSS
/* Buttons styles start */
button#excalibur-play {
display: inline-block;
position: relative;
z-index: 999;
border-radius: 6px;
border: none;
/*border: 3px solid;
border-color: white;
box-shadow: 0 0 10px #ccc;*/
padding: 1rem 1.5rem 1rem 4rem;
margin: 0;
text-decoration: none;
background: #00b233;
color: #ffffff;
font-family: sans-serif;
font-size: 2rem;
white-space: nowrap;
line-height: 1;
cursor: pointer;
text-align: center;
transition:
background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */
-ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */
-o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */
animation: excalibur-button-fadein 200ms;
}
/*
button#excalibur-play {
display: none;
}*/
button#excalibur-play:after {
position: absolute;
content: '';
border: 8px solid;
border-color: transparent transparent transparent white;
left: 35px;
top: 24px;
width: 0;
height: 0;
}
button#excalibur-play:before {
position: absolute;
content: '';
border: 3px solid;
left: 19px;
top: 14px;
border-radius: 20px;
width: 30px;
height: 30px;
}
button#excalibur-play:hover,
button#excalibur-play:focus {
background: #00982c;
}
button#excalibur-play:focus {
outline: 1px solid #fff;
outline-offset: -4px;
}
button#excalibur-play:active {
transform: scale(0.99);
}
@keyframes excalibur-button-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes excalibur-button-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes excalibur-button-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes excalibur-button-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes excalibur-button-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}