User Button

index.html

<div class="user-button">
  <span class="user-icon">
    M 
  </span>
</div>

<div class="user-info">
  <div class="user-icon-container">
    <span class="user-icon">
      M
    </span>
  </div>
  <div class="user-data-container">
    <span><b>Merrick Kavolsky</b></span>
    <span>technicmk@gmail.com</span>
  </div>
</div>

style.scss

@import url(http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500);
@import url('https://fonts.googleapis.com/css?family=Roboto:300');

html{
  box-sizing: border-box;
  font-family: Roboto, Sans-Serif;
  background: #fff;
}

*, *:before, *:after{
  box-sizing: inherit;
}

.user-button{
  margin: 50px;
  float: right; 
}

.user-icon{
  padding: 10px 14px;
  font-size: 2em;
  border-radius: 100%;
  background: #00897B; 
  color: #fff;
  cursor: pointer;
}

.user-info{
  position: absolute;
  display: flex;
  
  right: 50px;
  top: 120px;
  padding: 10px 10px;
  border: 1px solid;
  width: 300px;
  
  .user-icon-container{
    flex: 1;  
  }
  
  .user-data-container{
    flex: 1;
    
    span{
      display: block;
      margin: 5px 0;
    }
  }
  
  .user-icon{
    display: inline-block;
    padding: 30px 35px;
  }
}

user-button.markdown

User Button

A Pen by Merrick on CodePen.

License.