Changes

Jump to navigation Jump to search
no edit summary
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;
 
}
 
}
Bureaucrats, Interface administrators, lookupuser, staff, Administrators, translator
11,770

edits

Navigation menu