WillNog WillNog - 5 months ago 6x
CSS Question

How do i create the dots used for slides,with only html and css?

how do i create the dots used in navigation,slides.Using only Html and CSS.

Like this one: http://i.stack.imgur.com/qocTe.jpg

Thanks in advance.


First of all, let's define the HTML markup. Generally a simple list:

<ul class="nav-dots-container">
    <li class="nav-dot"></li>
    <li class="nav-dot"></li>
    <li class="nav-dot"></li>

After this, add some style:

.nav-dots-container .nav-dot{
   display: inline-block;
   width: 10px;
   height: 10px;
   background: #666;
   border-radius: 100%;
   margin: 3px;
   cursor: pointer;

At least, a bit of extra-styling:

.nav-dots-container .nav-dot.active{
  background: teal;
.nav-dots-container .nav-dot:hover{
  background: blue;

This is just a basic example.

Fiddle here: https://jsfiddle.net/gtk7jm14/