Save Click Effect Checkbox
Toggles · @vinodjangid07
- GPU-friendly
- No JS
A pure-CSS radio with pulse and SVG effects. Created by 3bdel3ziz-T on Uiverse.io.
Created by @3bdel3ziz-T on Uiverse.io · MIT License · View original →
<!-- "Red Blue Radio" by 3bdel3ziz-T on Uiverse.io · MIT License · https://uiverse.io/3bdel3ziz-T/tough-deer-65 -->
<div class="container">
<label for="dislike">
<input type="radio" name="evaluation" id="dislike" />
<svg
class="icon dislike"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M20 3H6.693A2.01 2.01 0 0 0 4.82 4.298l-2.757 7.351A1 1 0 0 0 2 12v2c0 1.103.897 2 2 2h5.612L8.49 19.367a2.004 2.004 0 0 0 .274 1.802c.376.52.982.831 1.624.831H12c.297 0 .578-.132.769-.36l4.7-5.64H20c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm-8.469 17h-1.145l1.562-4.684A1 1 0 0 0 11 14H4v-1.819L6.693 5H16v9.638L11.531 20zM18 14V5h2l.001 9H18z"
></path>
</svg>
</label>
<div class="count">
<div class="number">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div class="number">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div class="number">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<label for="like">
<input type="radio" name="evaluation" id="like" checked="" />
<svg
class="icon like"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M20 8h-5.612l1.123-3.367c.202-.608.1-1.282-.275-1.802S14.253 2 13.612 2H12c-.297 0-.578.132-.769.36L6.531 8H4c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h13.307a2.01 2.01 0 0 0 1.873-1.298l2.757-7.351A1 1 0 0 0 22 12v-2c0-1.103-.897-2-2-2zM4 10h2v9H4v-9zm16 1.819L17.307 19H8V9.362L12.468 4h1.146l-1.562 4.683A.998.998 0 0 0 13 10h7v1.819z"
></path>
</svg>
</label>
</div>
Toggles · @vinodjangid07
Toggles · @vishnupprajapat
Toggles · @SelfMadeSystem
Toggles · @catraco
Toggles · @catraco
Toggles · @Type-Delta