view raw
WillNog WillNog - 11 months ago 40
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:

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:

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

This is just a basic example.

Fiddle here: