MASIGNASUKA101
3757417361466409779

Star Rating Design Using Simple HTML & CSS

Star Rating Design Using Simple HTML & CSS
Add Comments
Friday, January 22, 2021

Star Rating Design Using Simple HTML & CSS

Hello friends, in this article I am going to show you how Five Star rating designs are made using only generic and CSS programming code. Star Rating is a web design that allows you to give feedback on any product or service. This will give other users a basic idea about the product. In this article, I have shared with you the easiest way to create a 5-star rating design. Many types of programming languages ​​(bootstrap, JavaScript) can be used to create these. However, it is most easily created using HTML and CSS code. It is basically a five-star rating design so there are five stars in this case. You can give as many stars as you want.


The video tutorial below will help you to make this five-star rating design. In the video below I have shown in full step by step which programming code to use to create an element.


Hopefully, you have learned how to make it from another video tutorial. If you have any problems, you can follow the tutorial below. In the following tutorial, I have shown step-by-step pictures of how I made this star rating system.

First of all, you create HTML and CSS files then copy and paste the structure below into the HTML file. Make sure you attach your CSS file to the HTML file.

Add HTML code to create a radio button

 The following programming codes are the HTML programming codes that have been used to create this star rating design. There are basically five radio buttons used. The following programming codes have been used to create those buttons.


<!-- html code -->
    <div class="rating">
            <!-- 1ST BUTTONS-->
        <input type="radio" name="rating" id="r1">
        <label for="r1"></label>
       <!-- 2ST BUTTONS-->
        <input type="radio" name="rating" id="r2">
        <label for="r2"></label>
       <!-- 3ST BUTTONS-->
        <input type="radio" name="rating" id="r3">
        <label for="r3"></label>
       <!-- 4ST BUTTONS-->
        <input type="radio" name="rating" id="r4">
        <label for="r4"></label>
       <!-- 5ST BUTTONS-->
        <input type="radio" name="rating" id="r5">
        <label for="r5"></label>
       
       </div>

Design the background and buttons using CSS code

 The following codes help to design the background and basic design of the radio buttons. Black color has been used in the background so that the star marks appear very beautifully.


@charset "UTF-8";
.rating {
  margin190px auto;
  width400px;
}
.rating > * {
  floatright;
}
@-webkit-keyframes pulse {
  50% {
    color#5e5e5e;
    text-shadow0 0 15px #777777;
  }
}
@keyframes pulse {
  50% {
    color#5e5e5e;
    text-shadow0 0 15px #777777;
  }
}
.rating label {
  height40px;
  width20%;
  displayblock;
  positionrelative;
  cursorpointer;
}
body{
    background-color#111;
}

  


Convert radio buttons to star rating

The following CSS codes have been used to convert radio buttons to star symbols. Star codes have been used with these codes so that the radio buttons have been converted to star signs. When you click on those star symbols, the clicked star will turn yellow. The following CSS code has a role to play in creating this hover effect.


.rating label::after{
    transitionall 0.4s ease-out;
    -webkit-font-smoothing:antialiased;
    positionabsolute;
    content"☆";
    color#444;
    top0;
    left0;
    width100%;
    height100%;
    text-aligncenter;
    font-size80px;
    -webkit-animation1s pulse ease;
    animation1s pulse ease;
}
/* add hover effect */
.rating label:hover::after{
    color#5e5e5e;
    text-shadow0 0 15px #5e5e5e;
}
.rating input{
    displaynone;
}
.rating input:checked + label::after,
.rating input:checked ~ label::after{
    content"★";
    color#f9bf3b;
    text-shadow0 0 20px #f9bf3b;
    
}



Hopefully, the above tutorial has helped you to create this star rating design. If you run into any problems with building a rating system like this one, you can follow the video tutorial above.



Thank you, Please Visit again