Pure CSS Star Rating Widget - with Html and CSS - No Javascipt

index.html

<div class="star-wrapper">
  <a href="https://codoseo.net/Web_design/website-design-order" class="fas fa-star s1">سفارش طراحی سایت حرفه ای فروشگاهی و شرکتی با وردپرس</a>
  <a href="https://codoseo.net/Web_design" class="fas fa-star s2">طراحی سایت حرفه ای</a>
  <a href="https://codoseo.net/Web_design" class="fas fa-star s3">طراحی سایت</a>
  <a href="https://codoseo.net/content-creation" class="fas fa-star s4">تولید محتوا</a>
  <a href="https://codoseo.net/content-production-order" class="fas fa-star s5">سفارش تولید محتوا</a>
</div>
<script src="https://kit.fontawesome.com/5ea815c1d0.js"></script>
<div class="wraper">
  <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="gitlabBilal" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff"></script>
</div>

pure-css-star-rating-widget-with-html-and-css-no-javascipt.markdown

Pure CSS Star Rating Widget - with Html and CSS - No Javascipt

سفارش طراحی سایت حرفه ای فروشگاهی و شرکتی با وردپرس طراحی سایت حرفه ای طراحی سایت تولید محتوا سفارش تولید محتوا

A Pen by Bilal.Rizwaan on CodePen.

License.

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #353b48;
}
.star-wrapper {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  direction: rtl;
}
.star-wrapper a {
  font-size: 4em;
  color: #fff;
  text-decoration: none;
  transition: all 0.5s;
  margin: 4px;
}
.star-wrapper a:hover {
  color: gold;
  transform: scale(1.3);
}
.s1:hover ~ a {
  color: gold;
}
.s2:hover ~ a {
  color: gold;
}
.s3:hover ~ a {
  color: gold;
}
.s4:hover ~ a {
  color: gold;
}
.s5:hover ~ a {
  color: gold;
}
.wraper {
  position: absolute;
  bottom: 30px;
  right: 50px;
}

Pure CSS Star Rating Widget - with Html and CSS - No Javascipt
autocad
academy of civil