<a href="#" class="btn show-all">Show all</a>
<a href="#" class="btn hide-all">Hide all</a>

<div class="box warning active">
  <a href="#box-close" class="box-close"></a>
  <strong>Attention!</strong>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio at nostrum inventore maxime rerum sit quasi quo eligendi ut tempore impedit assumenda vitae quae, fugit esse, blanditiis aliquam aut obcaecati, ipsam quia culpa consectetur hic accusamus molestiae. Rem, temporibus obcaecati.</p>
</div>

<div class="box info active">
  <a href="#box-close" class="box-close"></a>
  <strong>Information</strong>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio at nostrum inventore maxime rerum sit quasi quo eligendi ut tempore impedit assumenda vitae quae, fugit esse, blanditiis aliquam aut obcaecati, ipsam quia culpa consectetur hic accusamus molestiae. Rem, temporibus obcaecati.</p>
</div>

<div class="box error active">
  <a href="#box-close" class="box-close"></a>
  <strong>Fatal error!</strong>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio at nostrum inventore maxime rerum sit quasi quo eligendi ut tempore impedit assumenda vitae quae, fugit esse, blanditiis aliquam aut obcaecati, ipsam quia culpa consectetur hic accusamus molestiae. Rem, temporibus obcaecati.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, numquam.</p>
</div>

body {
  margin: 30px;
  font-family: sans-serif;
}

.box {
  display: none;
  background: #101010;
  border-radius: 10px;
  padding: 10px 10px 10px 60px;
  color: #FFF;
  font-size: 14px;
  line-height: 1.2;
  position: relative;
  margin: 10px 0;
}

.box.warning {
  background: linear-gradient(135deg, #F2994A 0%,#F2C94C 100%);
}

.box.info {
  background: linear-gradient(135deg, #00B4DB 0%,#0083B0 100%);
}

.box.error {
  background: linear-gradient(135deg, #CB356B 0%,#BD3F32 100%);
}

.box:before {
  content: "";
  position: absolute;
  display: block;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-size: contain;
}

.box.warning:before {
  background-image: url(https://habrastorage.org/webt/lu/ap/cv/luapcv7xqmru7pqylgkrqsi2i1e.png);
}

.box.info:before {
  background-image: url(https://habrastorage.org/webt/mb/22/lx/mb22lxpqh1cmouhtkyymax_hm9a.png);
}

.box.error:before {
  background-image: url(https://habrastorage.org/webt/vo/8e/ma/vo8ema06dbpcv6nttyt0pwp8-so.png);
}

.box-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  background-image: url(https://habrastorage.org/webt/iz/cm/r3/izcmr38ufch_03v4sdnoz0lp_jc.png);
  background-size: cover;
  cursor: pointer;
  text-decoration: none;
}

.box.active {
  display: block;
}

.box strong {
  font-size: 16px;
  font-weight: bold;
}

.box p:not(:last-child) {
  margin-bottom: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 15px;
  background: #000;
  text-decoration: none;
  color: #FFF;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.btn:after {
  content: "";
  display: block;
  position: absolute;
  left: -50px;
  top: -20px;
  width: 20px;
  height: 100px;
  background-color: rgba(255,255,255,0.2);
  transform: rotate(30deg);
}

.btn:hover:after {
  animation-duration: 0.5s;
  animation-name: line;
}

@keyframes line {
  from {
    left: 0;
  }

  to {
    left: 120%;
  }
}

.btn.show-all {
  background: linear-gradient(135deg, #11998e 0%,#38ef7d 100%);
}

.btn.hide-all {
  background: linear-gradient(135deg, #D66D75 0%,#E29587 100%);
}

$(document).ready(function() {
  $(".box .box-close").on("click", function() {
    $(this).parent().fadeOut();
  });
  
  $(".btn.show-all").on("click", function() {
    $(".box").each(function() {
      $(this).fadeIn();
    })
  });
  
  $(".btn.hide-all").on("click", function() {
    $(".box").each(function() {
      $(this).fadeOut();
    })
  });
  
});