logo

SYTEME DE DESIGN

Boutons

 

HTML

copy 
<button id="language">
		<input id="lang" type="checkbox">
		<div id="francais"><label for="lang">Fr</label></div>
		<div id="english"><label for="lang">En</label></div>
	</button>	
	<button id="color">
		<div id="frame">&nbsp;</div>
		<div id="select">
			<div id="round">&nbsp;</div>
		</div>
		<div id="white" onClick="color('white');">White</div>
		<div id="red" onClick="color('red');">Red</div>
		<div id="green" onClick="color('green');">Green</div>
		<div id="blue" onClick="color('blue');">Blue</div>
		<div id="black" onClick="color('black');">Black</div>
	</button>
	<button id="social_up">
		<p>CONTACT</p>
		<div><a href="#"><i class="fab fa-facebook fa-2x"></i></a><a href="#"><i class="fab fa-twitter-square fa-2x"></i></a><a href="#"><i class="fab fa-youtube fa-2x"></i></a></div>
	</button>
	<button id="nutri_score">
		<label>NUTRI-SCORE</label>
		<a id="score1" href="javascript:nutri_score(1);">A</a>
		<a id="score2" href="javascript:nutri_score(2);">B</a>
		<a id="score3" href="javascript:nutri_score(3);">C</a>
		<a id="score4" href="javascript:nutri_score(4);">D</a>
		<a id="score5" href="javascript:nutri_score(5);">E</a>
	</button>

CSS

copy 
button:focus {
	outline-style:none;
}


/*-- language : bouton glissière --*/
#language {
	position: absolute;
	display: block;
	right: 0;
	width: 80px;
	height: 38px;
	margin: 2rem 5rem;
	border-radius: 20px;
	padding: 1px!important;
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .6),
                inset -2px -2px 3px rgba(255, 255, 255, .6);	
}

#language button {
	border: none;
}

#language input {
	display: none;
}

#language label {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0.2rem 0.5rem;
	border-radius: 20px;
}

#language #francais, #language #english {
	position: absolute;
	display: block;
	top:1px;
	left:1px;
	width: 50px;
	height: 32px;
	border-radius: 20px;
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);	
}

#lang:not(:checked) ~ #francais {
	display: block;
	transform: translate(0, 0);
}

#lang:not(:checked) ~ #english {
	display: none;
}

#lang:checked ~ #francais {
	display: none;
}

#lang:checked ~ #english{
	display: block;
	transform: translate(24px, 0);
}



/*-- color : Bouton rond multichoix --*/

#color {
	position: absolute;
	left: 45%;
	width: 200px;
	margin-top: 3rem;
	border: none;
	background-color: transparent;
}

#color #frame {
	position: relative;
	margin-left: calc(50% - 25px);
	margin-bottom: 1rem;
	width: 50px;
	height: 50px;
	background-color: #fff;
	border: 1px solid #ccc;
}

#color #select {
	position: relative;
	width: 200px;
	height: 200px;
}

#color #round {
	position:absolute;
	margin: 50px;
	width: 100px;
	height: 100px;
	background-color: #ccc;
	border-radius: 50%;
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);	
}

#color #round::after {
	position: absolute;
	content: "";
	margin-top: calc(50% - 10px);
	margin-left: calc(50% - 25px);
	width: 20px;
	height: 20px;
	/*background: radial-gradient(#fff 0%, #000 100%);*/
	border-radius: 50%;
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .6),
                inset -2px -2px 3px rgba(255, 255, 255, .6);	
}

#color #white {
	position: absolute;
	top: calc(50% + 20px);
	left: 81%;
	background-color: transparent;
}

#color #red {
	position: absolute;
	top: calc(50% - 16px);
	left: 75%;
	background-color: transparent;
	transform: rotate(-22.5deg);
}

#color #green {
	position: absolute;
	top: calc(50% - 45px);
	left: 60%;
	background-color: transparent;
	transform: rotate(-60deg);
}

#color #blue {
	position: absolute;
	top: calc(50% - 48px);
	left: 43%;
	background-color: transparent;
	transform: rotate(-90deg);
}

#color #black {
	position: absolute;
	top: calc(50% - 38px);
	left: 20%;
	background-color: transparent;
	transform: rotate(-125deg);
}

/*-- social --*/

#social_up {
	position: relative;
	width: 150px;
	height: 30px;
	border: none;
	border-radius: 20px;
	padding-top: 0.2rem;
	background-color: #ccc;
	color: #000;
	overflow: hidden;
	transition: .25s;
}

#social_up:hover {
	width: 160px;
	height: 35px;
	padding-top: 0;
	background-color: transparent;
	transition: .25s;
	transition-duration: 2s;
}

#social_up:hover p {
	display: none;
}

#social_up a {
	position: relative;
	display: inline-block;
	padding: 0 0.5rem;
	color: #6487C4;
	margin-left: -40px;	
	transition-duration: 0s;
}

#social_up a:hover {
	color: #D36330;
	transition-duration: 0s;
}

#social_up:hover a:nth-child(1) {
	margin-left: 0px;
	transition: .25s;
}

#social_up:hover a:nth-child(2) {
	margin-left: 0px;
	transition: .25s;
	transition-duration: 2s;
}

#social_up:hover a:nth-child(3) {
	margin-left: 0px;
	transition: .25s;
	transition-duration: 2s;
}
/*-- nutri-score --*/

#nutri_score {
	display: flex;
	border: none;
	background-color: transparent;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#nutri_score label {
	text-align: left;
	width: 100%;
	color: #ccc;
	font-size: 12px;
}

#nutri_score a {
	position: relative;
	z-index: 1;
	padding: 0.15rem 0.5rem;
	border: none;
	color: rgba(255,255,255,0.5);
}

#nutri_score a:nth-of-type(1) {
	background-color: #038141;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

#nutri_score a:nth-of-type(2) {
	background-color: #85bb2f;
}

#nutri_score a:nth-of-type(3) {
	background-color: #fecb02;
}

#nutri_score a:nth-of-type(4) {
	background-color: #ee8100;
}

#nutri_score a:nth-of-type(5) {
	background-color: #e63e11;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;	
}

JAVASCRIPT

copy 
function color(cl) {
	
	document.getElementById("frame").style = "background-color: " + cl + ";";
	
	if (cl == "white") {
		document.getElementById("select").style = "transform: rotate(0deg);";
	}
	
	if (cl == "red") {
		document.getElementById("select").style = "transform: rotate(-32deg);";
	}
	
	if (cl == "green") {
		document.getElementById("select").style = "transform: rotate(-64deg);";
	}
	
	if (cl == "blue") {
		document.getElementById("select").style = "transform: rotate(-96deg);";
	}
	
	if (cl == "black") {
		document.getElementById("select").style = "transform: rotate(-128deg);";
	}
	
	
}

function nutri_score(n) {
	for(var i=1; i < 6; i++) {
		document.getElementById("score" + i).style = "border: none; color: rgba(255,255,255,0.5); margin-top: 0px; margin-left: 0px; margin-right: 0; z-index: 1; padding: 0.15rem 0.5rem;";
	}
	document.getElementById("score" + 1).style = "border-top-left-radius: 10px; border-bottom-left-radius: 10px;";
	document.getElementById("score" + 5).style = "border-top-right-radius: 10px; border-bottom-right-radius: 10px;";
	
	document.getElementById("score" + n).style = "border: 5px solid #fff; border-radius: 20px; margin-top: -8px; margin-left: -5px; margin-right: -5px; z-index: 5; padding: 0.30rem 0.40rem; color: rgba(255,255,255,1);";
}