WMGZON/static/css/buttons.css

67 lines
1.2 KiB
CSS
Raw Normal View History

@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);
}