penguin/AstroJS

botanjs/src/Astro/Blog/Components/ToggleButton/_this.css

raw · 1949 bytes

.btn_toggle {
	position: relative;

	font-family: serif;
	font-size: 1em;

	padding: 0.2em 0.5em;
	margin:  0.5em 0.2em;

	background-color: grey;
	color: white;

	cursor: default;

	overflow: hidden;
	display: inline-block;
}

.btn_toggle > .btn_space {
	visibility: hidden;
	padding: 0 0.5em;
}

.btn_toggle:hover {
	text-decoration: none;
}

.btn_toggle:hover:before, .btn_toggle:hover:after {
	text-decoration: underline;
}

.btn_toggle:before, .btn_toggle:after {

	text-align: center;

	position: absolute;
    padding-top: 0.15em;

	width: 100%;
	height: 100%;

	top: 0;
	left: 0;
	
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.btn_toggle:before {
	content: '';
	top: 0%;

	-webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-ms-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.btn_toggle:after {
	content: '';
	background-color: royalblue;
	top: 100%;

	-webkit-transition: all 750ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-moz-transition: all 750ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-ms-transition: all 750ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-o-transition: all 750ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.btn_toggle[active="1"]:after {
	top: 0%;
}


.btn_toggle[active="1"]:before {
	top: -100%;
}