ROUTE COMPONENT

by João Vitor Scheuermann

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">      

<div class='btn-container'>
   <div class='inner-text content-center no-select cd'>
     ROTA N
   </div>
   <div class='remove-btn content-center no-select cp'>
      <i class="material-icons">close</i>
   </div>
</div>

CSS

* {
  font-family: 'Roboto Condensed', sans-serif;
}

.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.cp{
  cursor:pointer;
}

.cd{
  cursor: default;
}

.btn-container{  
  width: 300px;
  height: 60px;
  background-color:#EC407A;  
}

.content-center {
  display: flex;
  align-items: center;
  justify-content: center;    
}


.inner-text {    
   width: 80%;
   height: 100%;
   float: left;
   color: #FFFFFF;
   transition: 0.3s;
}

.inner-text:hover{
  background-color: #E91E63;
}

.remove-btn{  
  width: 20%;
  height: 100%;
  float: right;
  color: #FFFFFF;
  transition: 0.2s;
}

.remove-btn:hover{
  background-color: #E91E63;
  transition:0.2s;
}

.remove-btn:active{
  background-color: #C2185B;
}