Hover spoiler css3

spoiler.css

.row {
  width: 300px;
  margin: 0 auto;
  font-family: "Scada", Arial, Tahoma;
}

.btn-close{
  position:relative;
  display:inline-block;
  height:40px;
  background:#303030;
  margin:10px 0px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  float:right;
  clear:both;
  overflow:hidden;
  -webkit-transition:all 0.3s linear;
  -moz-transition:all 0.3s linear;
  -o-transition:all 0.3s linear;
  transition:all 0.3s linear;
}

.btn-close-cross {
  position: absolute;
  right: 13px;
  padding-top: 6px;
  color:#446388;
  font-size:18px;
  white-space:nowrap;
  cursor: pointer;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  -o-transition:all 0.2s linear;
  transition:all 0.2s linear;
}

.btn-close-spoiler {
  position:absolute;
  width:0px;
  height:100%;
  top:0px;
  right:30px;
  color:#fff;
  font-size:14px;
  white-space:nowrap;
  text-align:left;
  text-indent:10px;
  overflow:hidden;
  line-height:38px;
  -webkit-transition:width 0.3s linear;
  -moz-transition:width 0.3s linear;
  -o-transition:width 0.3s linear;
  transition:width 0.3s linear;
}

.btn-close:hover {
  padding-right:270px;
  background:#000;
}

.btn-close:hover .btn-close-cross {
  color:#e83e0c;
}

.btn-close:hover .btn-close-spoiler {
  width: 250px;
  color: #e83e0c;
}

spoiler.html

<div class="row">
  <div class="btn-close">
    <span class="btn-close-spoiler">Сообщение</span>
    <span class="btn-close-cross">X</span>
  </div>
</div>

Example - https://jsfiddle.net/martdn/aq2mow8z/