/*Lorsqu’on ajoute des pseudo-éléments, il faut toujours se rappeler de spécifier la propriété content. 
Comme notre pseudo-élément n’a pas de contenu, il suffit de le spécifier comme suit:  */

.pebble::before {
  content: ""
  ... more styling goes here...
}

/*L’effet de reflet luisant est un dégradé linéaire qui traverse le bouton. 
Pour le réaliser, nous allons utiliser le pseudo-élément :after et lui donner une position initiale située en-dehors du bouton:*/


.supbutton::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

.supbutton {
  background: #e5ac8e;
  color: #fff;
  font-size: 50px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

/*Ajouter l’état hover peut se faire en empilant :after et :hover comme suit:*/

.supbutton:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

/*Spécifions maintenant les keyframes de cette animation.*/

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}



.button-referral {
/* white-space force le texte à rester sur une ligne */
  white-space : nowrap;
/* cursor affiche un curseur identique à celui des liens et boutons */
  cursor : pointer;
/* Aspect  du texte */
  font : 14px Arial, Helvetica, sans-serif;
/* display Transformation du type pour que celui-ci ai un comportement de type "block" */
  display : inline-block;
/* Alignement vertical du texte */
vertical-align : middle;
/* user-select Empêche que le texte soit sélectionné */
  -ms-user-select : none;
  -webkit-user-select : none;
  -moz-user-select : none;
  user-select : none;
/* Supprime outline fait juste pour ne pas perturber les exemples. 
Normalement pour l'accessibilité cela ne devrait pas se faire, */
  outline : none;
}


bouton {
	width:110px;
	cursor:pointer;
	text-transform:capitalize;
}



#bouton-1{
/* hérite de la class button-cours */
  color : #fff;
  padding : 0.313em 0.5em;
/* padding : 5px 8px;  pour une font-size parent de 16px */
  background-color : #078548;
  -moz-border-radius : 6px;
  -webkit-border-radius : 6px;
  border-radius : 6px;
}
#bouton-1:hover{
  background-color : #58a41c;
}
#bouton-1:focus{
  background-color : #007700;
}
#bouton-1:focus span{
  outline : 1px dotted #830743;
}
#bouton-1:active{
  background-color : #066c3a;
}

.bouton-3{
/* Code css du bouton css mon-bouton-1 

avec remplacement de : 
padding : 5px (border-radius/2)px;  pour une font-size parent de 16px */
  background-color : #303ACD;
  /*color : #fff;*/
  padding : 0.313em 0.625em;
  display : inline-table;
/* on veut que le bouton Css garde des bordures arrondies de 20px quoi qu'il arrive 
20px = border-radius
*/
  min-height : 20px; 
/* */
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  border-radius : 20px;
}
#bouton-3 span{
/* on veut que le contenu du bouton Css soit toujours centré verticalement
20px = border-radius
*/
  display : table-cell;
  min-height : 20px;   
  vertical-align : middle; 
}




.bouton4 {
	padding:6px 0 6px 0;
	font:bold 13px Arial;
	background:#f5f5f5;
	color:#555;
	border-radius:2px;
	width:100px;
	border:1px solid #ccc;
	box-shadow:1px 1px 3px #999;
}


.bouton6 {
	border-radius:12px 0 12px 0;
	background: #478bf9;
	border:none;
	color:#fff;
	font:bold 12px Verdana;
	padding:6px 0 6px 0;
}


.bouton7 {
	border-radius:12px 0 12px 0;
	background: #f5f5f5;
	border:none;
	color:#555;
	font:bold 12px Verdana;
	padding:6px 0 6px 0;
	border:1px solid #ccc;
}


.bouton8 {
	border-radius:12px 0 12px 0;
	background: #f5f5f5;
	/*border:none;*/
	border: solid;
	border-color: #e5d7ef;
	color:#555;
	font:bold 12px Verdana;
	padding:6px 0 6px 0;
	box-shadow:1px 1px 3px #999;
}


.bouton15 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:75%;
	border-bottom:3px solid #4753f3;
	font:bold 13px Arial;
	color:#555;
	background:#fff;
}


.bouton16 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:75%;
	border-bottom:7px solid #4753f3;
	font:bold 13px Arial;
	color:#555;
	background:#fff;
	box-shadow:2px 2px 3px #999;
	border-top:2px solid #59cd27;
}