Heart Rating
How do I make an heart rating?
What is a heart rating? How do you make a heart rating? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.
Heart Rating - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heart Rating</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { font-family: Roboto, Arial, sans-serif;
}
.widget { text-align: center; max-width: 300px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 3px;
}
.rating-widget-outer { display: inline-block;
}
.rating-widget-outer .labels { font-size: 0.6em; color: #999;
}
.rating-widget-outer .rating-widget { display: inline-block; padding-bottom: 0.6em;
}
.rating-widget-outer .rating-widget input { display: none;
}
.rating-widget-outer .rating-widget label { float: right; color: #999; cursor: pointer; margin: 0; position: relative;
}
.rating-widget-outer .rating-widget label:before { margin: 0 0.2em; font-family: FontAwesome; display: inline-block; content: '\f08a'; transition: all 0.1s ease-in-out;
}
.rating-widget-outer .rating-widget label:hover:before { transform: scale(1.3);
}
.rating-widget-outer .rating-widget label > span { font-weight: normal; position: absolute; top: 100%; font-size: 0.6em; color: #999; width: 100%; left: 0; text-align: center; line-height: 0.6em;
}
.rating-widget-outer .rating-widget input:checked ~ label,
.rating-widget-outer .rating-widget:not(:checked) > label:hover,
.rating-widget-outer .rating-widget:not(:checked) > label:hover ~ label { color: red;
}
.rating-widget-outer .rating-widget input:checked ~ label:before,
.rating-widget-outer .rating-widget:not(:checked) > label:hover:before,
.rating-widget-outer .rating-widget:not(:checked) > label:hover ~ label:before { content: '\f004';
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="widget"> <p>How likely is it that you would recommend us to a friend?</p> <div class="rating-widget-outer"> <div class="labels"> <span class="pull-left">Not Likely</span> <span class="pull-right">Very Likely</span> </div> <span class="rating-widget"> <input type="radio" id="star10" name="rating" value="10"> <label for="star10"><span>10</span></label> <input type="radio" id="star9" name="rating" value="9"> <label for="star9"><span>9</span></label> <input type="radio" id="star8" name="rating" value="8"> <label for="star8"><span>8</span></label> <input type="radio" id="star7" name="rating" value="7"> <label for="star7"><span>7</span></label> <input type="radio" id="star6" name="rating" value="6"> <label for="star6"><span>6</span></label> <input type="radio" id="star5" name="rating" value="5"> <label for="star5"><span>5</span></label> <input type="radio" id="star4" name="rating" value="4"> <label for="star4"><span>4</span></label> <input type="radio" id="star3" name="rating" value="3"> <label for="star3"><span>3</span></label> <input type="radio" id="star2" name="rating" value="2"> <label for="star2"><span>2</span></label> <input type="radio" id="star1" name="rating" value="1"> <label for="star1"><span>1</span></label> <input type="radio" id="star0" name="rating" value="0"> <label for="star0"><span>0</span></label> </span> </div>
</div>
</body>
</html>
Heart Rating - Script Codes CSS Codes
html { font-family: Roboto, Arial, sans-serif;
}
.widget { text-align: center; max-width: 300px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 3px;
}
.rating-widget-outer { display: inline-block;
}
.rating-widget-outer .labels { font-size: 0.6em; color: #999;
}
.rating-widget-outer .rating-widget { display: inline-block; padding-bottom: 0.6em;
}
.rating-widget-outer .rating-widget input { display: none;
}
.rating-widget-outer .rating-widget label { float: right; color: #999; cursor: pointer; margin: 0; position: relative;
}
.rating-widget-outer .rating-widget label:before { margin: 0 0.2em; font-family: FontAwesome; display: inline-block; content: '\f08a'; transition: all 0.1s ease-in-out;
}
.rating-widget-outer .rating-widget label:hover:before { transform: scale(1.3);
}
.rating-widget-outer .rating-widget label > span { font-weight: normal; position: absolute; top: 100%; font-size: 0.6em; color: #999; width: 100%; left: 0; text-align: center; line-height: 0.6em;
}
.rating-widget-outer .rating-widget input:checked ~ label,
.rating-widget-outer .rating-widget:not(:checked) > label:hover,
.rating-widget-outer .rating-widget:not(:checked) > label:hover ~ label { color: red;
}
.rating-widget-outer .rating-widget input:checked ~ label:before,
.rating-widget-outer .rating-widget:not(:checked) > label:hover:before,
.rating-widget-outer .rating-widget:not(:checked) > label:hover ~ label:before { content: '\f004';
}
Developer | Nick Nikolov |
Username | necks |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 3,349 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Moblie friendly top navbar | 3,556 Kb |
Checkbox | 2,493 Kb |
Simple grid layout | 1,978 Kb |
Subtle site navigation with description | 3,206 Kb |
Single element speech bubble | 3,191 Kb |
Table cell corner indicator | 2,091 Kb |
SVG Clock | 2,163 Kb |
Page header bar toggle on scroll | 4,141 Kb |
4 color border for highlighting feature elements | 4,105 Kb |
CSS Animated Weather icons | 5,145 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
LeMandinque | Aadesida | 9,046 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
P1 | Vivi_Lai | 1,533 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!