Hello, today I want to show you something interesting ICONS or Highlighted ICONS using CSS, see the code below and suggest to me what other design I can try and what you guys make interesting like this.
HTML Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <title>Check Box</title> <link rel="stylesheet" type="text/css" href="ghost.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body><span style="color:red;font-size: 20px;"><b>Tap icons to see the effect</b></span> <!--<span style="color: #008000"><strong>Below These are font awesome icons</strong></span>--> <ul> <li> <label> <input type="checkbox" name=""> <i class="fa fa-wifi" aria-hidden="true"></i> <span class="check"></span> </label> </li> <li> <label> <input type="checkbox" name=""> <i class="fa fa-bluetooth-b" aria-hidden="true"></i> <span class="check"></span> </label> </li> <li> <label> <input type="checkbox" name=""> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> <span class="check"></span> </label> </li> <li> <label> <input type="checkbox" name=""> <i class="fa fa-envelope-o" aria-hidden="true"></i> <span class="check"></span> </label> </li> <li> <label> <input type="checkbox" name=""> <i class="fa fa-battery-three-quarters" aria-hidden="true"></i> <span class="check"></span> </label> </li> </ul> </body> </html> |
CSS Code:
ghost.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
body{ margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; background-color: #060606; height:100vh; } ul{ position: relative; margin: 0px; padding: 0px; display: flex; } ul li{ position: relative; list-style: none; width: 100px; text-align: center; } ul li label{ position: relative; } ul li label i, ul li label input[type="checkbox"] { display: block; text-align: center; } ul li label i.fa{ font-size: 40px; color: #222; transition: 0.5s; } ul li label input[type="checkbox"] { position: absolute; opacity: 0; cursor:pointer; } ul li label .check { position: relative; display: block; width: 50px; height: 50px; background: linear-gradient(#000,#333) border-radius: 50%; margin: 10px auto 0; display: flex; justify-content: center; align-items: center; z-index: 1; } ul li label .check:before{ content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background:#1b1b1b; transition: 0.5s; z-index: 3; } ul li label .check:after{ content: ''; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; background: #222; border-radius: 50%; z-index: 2; border: 2px solid #161616; } ul li label input[type="checkbox"]:checked ~ .check:before{ background: rgba(0,176,255,1); box-shadow: 0 0 10px rgba(0,176,255,1), 0 0 15px rgba(0,176,255,1), 0 0 20px rgba(0,176,255,1), 0 0 25px rgba(0,176,255,1), 0 0 0 2px rgba(0,176,255,.1); } ul li label input[type="checkbox"]:checked ~ i.fa { color: rgb(0,176,255,1); } |
Copy and Paste above code on your Code Editor and see, how it looks…!
Happy Coding..!
Was this article helpful?
YesNo