Nasıl Yapılır Less Ultra Rank Gelişmiş İconlu -mertboss.com

<div class="rank kodlama">
  <i class="fa fa-code" aria-hidden="true"></i>
  mertboss.com
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);



.rank {

  cursor:pointer;

  user-select:none;

  font-family: 'Roboto', sans-serif;

  background:#333 url(https://www.transparenttextures.com/patterns/asfalt-light.png);

  color:#fff;

  width:220px;

  border-radius:3px;

  height:40px;

  line-height:40px;

  border-right:4px solid rgba(0,0,0,.4);

  transition:.5s ease;

  box-shadow:0 2px 2px rgba(0,0,0,.3);

}



.kodlama {

  background-color:#7d34f3;

}



.rank i {

  float:left;

  height:40px;

  width:40px;

  text-align:center;

  line-height:40px;

  font-size:18px;

  background:rgba(0,0,0,.4);

  margin-right:10px;

}



.rank:hover {

  background-position:20px 0px;

  box-shadow:0 4px 2px rgba(0,0,0,.3);

}