11,770
edits
Changes
Jump to navigation
Jump to search
Line 439:
Line 439: − } − #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;
no edit summary
font-weight:bold;
font-weight:bold;
min-height:130px;
min-height:130px;
}
}