<div class="radikalwp-hv-skew"><div class="radikalwp-hv-skew-img" style="background:linear-gradient(135deg,#0f766e,#0891b2)"><//div><div class="radikalwp-hv-skew-ov"><span>▶ تماشا<//span><//div><//div>

.radikalwp-hv-skew { position: relative; width: 230px; height: 150px; border-radius: 16px; overflow: hidden; cursor: pointer; }
.radikalwp-hv-skew-img { width: 100%; height: 100%; }
.radikalwp-hv-skew-ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 145, 178, .93);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path .45s cubic-bezier(.5, .1, .3, 1);
}
.radikalwp-hv-skew-ov span {
  padding: 10px 26px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  transform: translateY(14px);
  transition: transform .4s ease .1s;
}
.radikalwp-hv-skew:hover .radikalwp-hv-skew-ov { clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); }
.radikalwp-hv-skew:hover .radikalwp-hv-skew-ov span { transform: translateY(0); }