67 lines
1.2 KiB
CSS
67 lines
1.2 KiB
CSS
|
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--btn-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
font-size: medium;
|
||
|
|
font-weight: bold;
|
||
|
|
width : var(--btn-width);
|
||
|
|
height : 50px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-align : center;
|
||
|
|
transition : .2s;
|
||
|
|
cursor : pointer;
|
||
|
|
border-radius: 3px;
|
||
|
|
box-shadow: 0px 1px 2px rgba(0,0,0,.2);
|
||
|
|
}
|
||
|
|
.btnTwo {
|
||
|
|
position : relative;
|
||
|
|
width : 200px;
|
||
|
|
height : 100px;
|
||
|
|
margin-top: -100px;
|
||
|
|
padding-top: 2px;
|
||
|
|
background : rgba(0, 0, 0, 0.1);
|
||
|
|
left : -250px;
|
||
|
|
transition : .3s;
|
||
|
|
}
|
||
|
|
.btnText {
|
||
|
|
color : white;
|
||
|
|
transition : .3s;
|
||
|
|
}
|
||
|
|
.btnText2 {
|
||
|
|
margin-top : 63px;
|
||
|
|
margin-right : -130px;
|
||
|
|
color : #FFF;
|
||
|
|
}
|
||
|
|
.button:hover .btnTwo{ /*When hovering over .button change .btnTwo*/
|
||
|
|
left: -130px;
|
||
|
|
}
|
||
|
|
.button:hover .btnText{ /*When hovering over .button change .btnText*/
|
||
|
|
margin-left : 65px;
|
||
|
|
}
|
||
|
|
.button:active { /*Clicked and held*/
|
||
|
|
box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.error {
|
||
|
|
background-color: var(--red);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.success {
|
||
|
|
background: var(--green);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.info {
|
||
|
|
background-color: #2879c550;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.wmgzon {
|
||
|
|
background-color: orange;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.neutral {
|
||
|
|
background-color: rgba(0, 0, 0, 0.3);
|
||
|
|
}
|