Difference between revisions of "Team:Tianjin/Resources/CSS:button"

 
Line 48: Line 48:
 
   position: relative;
 
   position: relative;
 
   text-align: center;
 
   text-align: center;
−
   width: 20em;
+
   width: 10em;
 
   border-radius:10px;
 
   border-radius:10px;
 
   float:left;
 
   float:left;

Latest revision as of 06:58, 29 October 2017

.set_5_button3 { 

 background: #ffe495;
 color: white;
 overflow: hidden;
 z-index: 1;
 font-weight: 400;
 line-height: 45px;
 margin-right: 2.5em;
 cursor:pointer;
 overflow: hidden;
 padding: 0 15px;
 position: relative;
 text-align: center;
 width: 10em;
 border-radius:10px;
 float:left;

} .set_5_button3:after { 

 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 500%;
 height: 1000%;
 background: #ffbc2c;
 z-index: -1;
 transform-origin: 0% 0%;
 transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
 /transform: translateY(10%) translateX(16%) rotate(-45deg);
 transition: transform .3s;

} .set_5_button3:hover::after { 

 transform: translateY(10%) translateX(-25px) rotate(-45deg);

}


.set_5_button5 { 

 background: #ffe495;
 color: white;
 overflow: hidden;
 z-index: 1;
 font-weight: 400;
 line-height: 45px;
 margin-right: 2.5em;
 cursor:pointer;
 overflow: hidden;
 padding: 0 15px;
 position: relative;
 text-align: center;
 width: 10em;
 border-radius:10px;
 float:left;

} .set_5_button5:after { 

 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 500%;
 height: 1000%;
 background: #ffbc2c;
 z-index: -1;
 transform-origin: 0% 0%;
 transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
 /transform: translateY(10%) translateX(16%) rotate(-45deg);
 transition: transform .3s;

} .set_5_button5:hover::after { 

 transform: translateY(10%) translateX(-25px) rotate(-45deg);

}