POC Smiley 20180307

Version 1.0: init

by ced1

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Satisfait(e) de mes  services aujourd'hui ?</h2>
		<ul class="list_actions">
			<li><a href="#" class="btn btn-primary small-square ">
          <i class="fa fa-smile-o smiley1" aria-hidden="true"></i></a>
      </li>
			<li><a href="#" class="btn btn-primary small-square ">
            <i class="fa fa-meh-o smiley2"></i></a>
      </li>
			<li><a href="#" class="btn btn-primary small-square ">
            <i class="fa fa-frown-o smiley3"></i></a>
     </li>
		</ul>

CSS

a.small-square { border-radius:0px; text-decoration:none; width:200px; height: 200px;

}
a.small-square i { text-align: center; line-height: 200px;
}

 .btn-primary {
	background-color: #8d6dc4 !important;
	border: 0px;
}
 .btn-primary:hover {
	background-color: #8d6dc4 !important;
	border: 0px;
}
 ul, li {
		display: inline;
	}
 
 .fa{
   font-size: 180px;
 }
 
 .smiley1{
   color: #9bef9d !important;
 }
 
  .smiley2{
   color: #efea9b !important;
 }
 
  .smiley3{
   color: #ef8699 !important;
 }