<div class="cont">
  <figure class="element btn-color-1">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-2">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-3">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-4">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-5">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-6">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-7">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-8">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-9">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-10">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
  <figure class="element btn-color-11">
    <a class="element__link" href="#"></a>
    <span class="element__badge">
      <span class="element-badge__icon"></span>
    </span>
    <figcaption class="element__content">
      <h5 class="element-content__subtitle">Факультат</h5>
      <h6 class="element-content__title">Дизайн</h6>
    </figcaption>
  </figure>
</div>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 40px;
  font-family: "Oswald", sans-serif;
  background: #eee;
}

.cont {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 25px;
}

.element {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  color: #fff;
  cursor: pointer;
  height: 200px;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

.element__link {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  left: 0;
  top: 0;
}

.element__badge {
  width: 50px;
  height: 60px;
  display: flex;
  padding-bottom: 5px;
  justify-content: center;
  align-items: center;
  background: #252525;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 50% 100%, 0 70%);
  opacity: 0.6;
}

.element-badge__icon {
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Cpath d='M5 5.5A3.5 3.5 0 018.5 2H12v7H8.5A3.5 3.5 0 015 5.5zM12 2h3.5a3.5 3.5 0 110 7H12V2z'/%3E%3Cpath d='M12 12.5a3.5 3.5 0 117 0 3.5 3.5 0 11-7 0zM5 19.5A3.5 3.5 0 018.5 16H12v3.5a3.5 3.5 0 11-7 0zM5 12.5A3.5 3.5 0 018.5 9H12v7H8.5A3.5 3.5 0 015 12.5z'/%3E%3C/svg%3E");
}

.element__content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.element-content__subtitle {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.element-content__title {
  font-size: 25px;
  text-transform: uppercase;
  margin-top: 10px;
  letter-spacing: 2px;
}

.btn-color-1 {
  background-image: linear-gradient(
    to right,
    #25aae1,
    #40e495,
    #30dd8a,
    #2bb673
  );
}
.btn-color-2 {
  background-image: linear-gradient(
    to right,
    #f5ce62,
    #e43603,
    #fa7199,
    #e85a19
  );
}
.btn-color-3 {
  background-image: linear-gradient(
    to right,
    #667eea,
    #764ba2,
    #6b8dd6,
    #8e37d7
  );
}
.btn-color-4 {
  background-image: linear-gradient(
    to right,
    #fc6076,
    #ff9a44,
    #ef9d43,
    #e75516
  );
}
.btn-color-5 {
  background-image: linear-gradient(
    to right,
    #0ba360,
    #3cba92,
    #30dd8a,
    #2bb673
  );
}
.btn-color-6 {
  background-image: linear-gradient(
    to right,
    #009245,
    #fcee21,
    #00a8c5,
    #d9e021
  );
}
.btn-color-7 {
  background-image: linear-gradient(
    to right,
    #6253e1,
    #852d91,
    #a3a1ff,
    #f24645
  );
}
.btn-color-8 {
  background-image: linear-gradient(
    to right,
    #29323c,
    #485563,
    #2b5876,
    #4e4376
  );
}
.btn-color-9 {
  background-image: linear-gradient(
    to right,
    #25aae1,
    #4481eb,
    #04befe,
    #3f86ed
  );
}
.btn-color-10 {
  background-image: linear-gradient(
    to right,
    #ed6ea0,
    #ec8c69,
    #f7186a,
    #fbb03b
  );
}
.btn-color-11 {
  background-image: linear-gradient(
    to right,
    #eb3941,
    #f15e64,
    #e14e53,
    #e2373f
  );
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.