Generated by SassMeister.com.

SassMeister-input-HTML.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="box green">
  <div class="icon">
    <i class="fa fa-money"></i>
  </div>
  <div class="title">Segment Revenue</div>
  <div class="button">Start Activity</div>
</div>

<div class="box orange">
  <div class="icon">
    <i class="fa fa-random"></i>
  </div>
  <div class="title">Relative Position</div>
  <div class="button">Start Activity</div>
</div>

<div class="box blue">
  <div class="icon">
    <i class="fa fa-balance-scale"></i>
  </div>
  <div class="title">Strategic Intent</div>
  <div class="button">Start Activity</div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$blue: #2E9AFE
$green: #2BE94A
$orange: #FFC12D

.box
  width: 260px
  height: 200px
  margin: 6px
  float: left
  position: relative
  overflow: hidden
  
  transition: background-color 0.2s
  
  &.blue
    background-color: $blue
    
    .button
      background-color: darken($blue, 40%)
    
    &:hover
      background-color: darken($blue, 20%)
  
  &.green
    background-color: $green
    
    .button
      background-color: darken($green, 40%)
    
    &:hover
      background-color: darken($green, 20%)
  
  &.orange
    background-color: $orange
    
    .button
      background-color: darken($orange, 40%)
    
    &:hover
      background-color: darken($orange, 20%)
  
  .title
    width: 100%
    font-size: 18px
    font-family: sans-serif
    font-weight: 200
    text-align: center
    text-transform: uppercase
    letter-spacing: 2px
    color: #FFF
    position: absolute
    top: 140px
    left: 0px
    
    transition: top 0.2s
  
  .button
    width: 60%
    margin: 0 10%
    padding: 20px 10%
    border-radius: 5px
    font-size: 16px
    font-family: sans-serif
    font-weight: 200
    text-align: center
    color: #FFF
    position: absolute
    top: 200px
    left: 0px
    opacity: 0
    
    transition: top 0.4s, opacity 0.4s
    
  .icon
    width: 100%
    height: 80px
    font-size: 70px
    text-align: center
    color: #FFF
    position: absolute
    top: 36px
    opacity: 1
    
    transition: opacity 0.2s

  &:hover
    cursor: pointer
    
    .title
      top: 40px
    
    .button
      top: 100px
      opacity: 1
    
    .icon
      opacity: 0

SassMeister-output.css

.box {
  width: 260px;
  height: 200px;
  margin: 6px;
  float: left;
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s;
}
.box.blue {
  background-color: #2E9AFE;
}
.box.blue .button {
  background-color: #003260;
}
.box.blue:hover {
  background-color: #0167c5;
}
.box.green {
  background-color: #2BE94A;
}
.box.green .button {
  background-color: #074110;
}
.box.green:hover {
  background-color: #109e27;
}
.box.orange {
  background-color: #FFC12D;
}
.box.orange .button {
  background-color: #604400;
}
.box.orange:hover {
  background-color: #c68c00;
}
.box .title {
  width: 100%;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: 200;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #FFF;
  position: absolute;
  top: 140px;
  left: 0px;
  transition: top 0.2s;
}
.box .button {
  width: 60%;
  margin: 0 10%;
  padding: 20px 10%;
  border-radius: 5px;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 200;
  text-align: center;
  color: #FFF;
  position: absolute;
  top: 200px;
  left: 0px;
  opacity: 0;
  transition: top 0.4s, opacity 0.4s;
}
.box .icon {
  width: 100%;
  height: 80px;
  font-size: 70px;
  text-align: center;
  color: #FFF;
  position: absolute;
  top: 36px;
  opacity: 1;
  transition: opacity 0.2s;
}
.box:hover {
  cursor: pointer;
}
.box:hover .title {
  top: 40px;
}
.box:hover .button {
  top: 100px;
  opacity: 1;
}
.box:hover .icon {
  opacity: 0;
}

SassMeister-rendered.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="box green">
  <div class="icon">
    <i class="fa fa-money"></i>
  </div>
  <div class="title">Segment Revenue</div>
  <div class="button">Start Activity</div>
</div>

<div class="box orange">
  <div class="icon">
    <i class="fa fa-random"></i>
  </div>
  <div class="title">Relative Position</div>
  <div class="button">Start Activity</div>
</div>

<div class="box blue">
  <div class="icon">
    <i class="fa fa-balance-scale"></i>
  </div>
  <div class="title">Strategic Intent</div>
  <div class="button">Start Activity</div>
</div>