Line 439: |
Line 439: |
| font-weight:bold; | | font-weight:bold; |
| min-height:130px; | | min-height:130px; |
| + | } |
| + | #abc{ |
| + | width:85vw; |
| + | color:white; |
| + | font-size:5vw; |
| + | text-align:center; |
| + | text-shadow:2px 2px black; |
| + | font-weight:bold; |
| + | min-height:130px; |
| + | border-radius:0px; |
| + | } |
| + | *, |
| + | *:before, |
| + | *:after { |
| + | -webkit-box-sizing: border-box; |
| + | -moz-box-sizing: border-box; |
| + | box-sizing: border-box; |
| + | } |
| + | |
| + | .AcronymButton{ |
| + | background-color:transparent; |
| + | font-size:2.4vw; |
| + | width:12vw; |
| + | height:7.7vw; |
| + | padding:.5vw .5vw; |
| + | display: inline-block; |
| + | position: relative; |
| + | border: .2vw solid #FFF; |
| + | overflow: hidden; |
| + | text-decoration: none; |
| + | text-align:center; |
| + | outline: none; |
| + | color: #FFF; |
| + | font-family: 'raleway', sans-serif; |
| + | box-shadow: 1px 1px 1px gray; |
| + | } |
| + | .AcronymButton span { |
| + | -webkit-transition: 0.6s; |
| + | -moz-transition: 0.6s; |
| + | -o-transition: 0.6s; |
| + | transition: 0.6s; |
| + | -webkit-transition-delay: 0.2s; |
| + | -moz-transition-delay: 0.2s; |
| + | -o-transition-delay: 0.2s; |
| + | transition-delay: 0.2s; |
| + | } |
| + | |
| + | .AcronymButton:before, |
| + | .AcronymButton:after { |
| + | content: ''; |
| + | position: absolute; |
| + | top: 0.67em; |
| + | left: 0; |
| + | width: 100%; |
| + | text-align: center; |
| + | opacity: 0; |
| + | -webkit-transition: .4s,opacity .6s; |
| + | -moz-transition: .4s,opacity .6s; |
| + | -o-transition: .4s,opacity .6s; |
| + | transition: .4s,opacity .6s; |
| + | } |
| + | .AcronymButton:before { |
| + | content: attr(data-hover); |
| + | font-size:1vw; |
| + | -webkit-transform: translate(-150%,0); |
| + | -moz-transform: translate(-150%,0); |
| + | -ms-transform: translate(-150%,0); |
| + | -o-transform: translate(-150%,0); |
| + | transform: translate(-150%,0); |
| + | } |
| + | |
| + | /* :after */ |
| + | |
| + | .AcronymButton:after { |
| + | content: attr(data-active); |
| + | -webkit-transform: translate(150%,0); |
| + | -moz-transform: translate(150%,0); |
| + | -ms-transform: translate(150%,0); |
| + | -o-transform: translate(150%,0); |
| + | transform: translate(150%,0); |
| + | } |
| + | |
| + | /* Span on :hover and :active */ |
| + | |
| + | .AcronymButton:hover span, |
| + | .AcronymButton:active span { |
| + | font-size:1vw; |
| + | opacity: 0; |
| + | -webkit-transform: scale(0.3); |
| + | -moz-transform: scale(0.3); |
| + | -ms-transform: scale(0.3); |
| + | -o-transform: scale(0.3); |
| + | transform: scale(0.3); |
| + | } |
| + | |
| + | /* |
| + | We show :before pseudo-element on :hover |
| + | and :after pseudo-element on :active |
| + | */ |
| + | |
| + | .AcronymButton:hover:before, |
| + | .AcronymButton:active:after { |
| + | opacity: 1; |
| + | -webkit-transform: translate(0,0); |
| + | -moz-transform: translate(0,0); |
| + | -ms-transform: translate(0,0); |
| + | -o-transform: translate(0,0); |
| + | transform: translate(0,0); |
| + | -webkit-transition-delay: .4s; |
| + | -moz-transition-delay: .4s; |
| + | -o-transition-delay: .4s; |
| + | transition-delay: .4s; |
| + | } |
| + | |
| + | /* |
| + | We hide :before pseudo-element on :active |
| + | */ |
| + | |
| + | .AcronymButton:active:before { |
| + | -webkit-transform: translate(-150%,0); |
| + | -moz-transform: translate(-150%,0); |
| + | -ms-transform: translate(-150%,0); |
| + | -o-transform: translate(-150%,0); |
| + | transform: translate(-150%,0); |
| + | -webkit-transition-delay: 0s; |
| + | -moz-transition-delay: 0s; |
| + | -o-transition-delay: 0s; |
| + | transition-delay: 0s; |
| } | | } |