<div class="tavsiyekutusu cmf">
<span style="color: white;">CodeMareFi</span>
</div>

<div class="tavsiyekutusu cmf2">
<span style="color: white;">CodeMareFi</span>
</div>

<div class="tavsiyekutusu cmf3">
<span style="color: white;">CodeMareFi</span>
</div>

<div class="tavsiyekutusu cmf4">
<span style="color: white;">CodeMareFi</span>
</div>

<span style="color: #ec0707;">
  <i aria-hidden="true" class="fa fa-heart fa-lg fa-beat"></i>
</span>
<a href="https://codemarefi.blogspot.com" target="_blank">
  <b>
  <span style="color: #1a81f3;">C</span>
  <span style="color: #ec0707;">o</span>
  <span style="color: #f4ce0b;">d</span>
  <span style="color: #1a81f3;">e</span>
  <span style="color: #01b80d;">M</span>
  <span style="color: #ec0707;">a</span>
  <span style="color: #1a81f3;">r</span>
  <span style="color: #f4ce0b;">e</span>
  <span style="color: #ec0707;">F</span>
  <span style="color: #ec0707;">i</span>
  </b>
  </a>
/* cmf - kutu */

.tavsiyekutusu {
  overflow: hidden;
  position: relative;
  margin: 1.5rem 0 1rem;
  transition: box-shadow .25s;
  border-radius: 2px;
  color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  padding: 30px;
  font-size: 18px
}

.tavsiyekutusu.cmf {
  background: linear-gradient(-50deg, #c0392b, #d35400, #f39c12, #2980b9, #8e44ad, #e84393);
  background-size: 320% 200%;
  animation: Gradient 5s ease infinite;
  position: relative;
  overflow: hidden;
  font-color: #fff
}

.tavsiyekutusu.cmf2 {
  background: linear-gradient(-50deg, #00b894, #00cec9, #0984e3, #6c5ce7, #fdcb6e, #e17055);
  background-size: 320% 200%;
  animation: Gradient 15s ease infinite;
  position: relative;
  overflow: hidden;
  font-color: #fff
}

.tavsiyekutusu.cmf3 {
  background: linear-gradient(-50deg, #4b6584, #3867d6, #4b7bec, #2d98da, #45aaf2, #fc5c65);
  background-size: 320% 200%;
  animation: Gradient 15s ease infinite;
  position: relative;
  overflow: hidden;
  font-color: #fff
}

.tavsiyekutusu.cmf4 {
  background: linear-gradient(-50deg, #2c3e50, #34495e, #222f3e, #576574, #0c2461, #1e3799);
  background-size: 320% 200%;
  animation: Gradient 15s ease infinite;
  position: relative;
  overflow: hidden;
  font-color: #fff
}

.fa-beat {
  animation: fa-beat 3.5s ease infinite
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    margin-left: 90%;
    vertical-align: -15%;
}

a {
    /* color: #ff1100; */
    text-decoration: none;
    outline: none;
    transition: all 0.15s;
}

b {
    font-weight: 700;
    padding: 0;
    transition: color 1.2s;
}

@keyframes fa-beat {
  0% {
    transform: scale(1)
  }
  5% {
    transform: scale(1.25)
  }
  20% {
    transform: scale(1)
  }
  30% {
    transform: scale(1)
  }
  35% {
    transform: scale(1.25)
  }
  50% {
    transform: scale(1)
  }
  55% {
    transform: scale(1.25)
  }
  70% {
    transform: scale(1)
  }
}

@keyframes Gradient {
  0% {
     background-position:0 50% 
  }
  50% {
     background-position:100% 50% 
  }
  100% {
     background-position:0 50% 
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.