POC Smiley 20180307

Version 1.1: final

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 color-green circle-white font-super" aria-hidden="true"></i></a>
      </li>
			<li><a href="#" class="btn btn-primary small-square">
            <i class="fa fa-meh-o color-yellow circle-white font-super"></i></a>
      </li>
			<li><a href="#" class="btn btn-primary small-square">
            <i class="fa fa-frown-o color-red circle-white font-super"></i></a>
     </li>
		</ul>
    
    <div class="circle"></div>

CSS

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

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

 .btn-primary {
	background-color: #8d6dc4 !important;
	border: 0px;
}
 .btn-primary:hover {
	background-color: #8d6dc4 !important;
	border: 0px;
}
 ul, li {
		display: inline;
	}
 
.font-super {
  font-size: 190px;
}
 
 .color-green{
   color: #009900 !important;
 }
 
 .color-yellow{
   color: #FFDD00 !important;
 }
 
 .color-red{
   color: #CC0000 !important;
 }
 
 .circle-white { 
   margin-top:5px;
   width: 180px;
   height: 180px;
   background: white; 
   -moz-border-radius: 90px; 
   -webkit-border-radius: 90px; 
   border-radius: 95px;
}