Get started with simpledotcss CDN

MIT licensed

Simpledotcss is a minimal CSS library providing customizable dot loaders for your projects.

Tags:
  • css
  • html
  • simple.css
  • simplecss.org
  • simplecss
  • classless

Stable version

Copied!

How to start using simpledotcss CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.cdnhub.io/simpledotcss/2.3.0/simple.min.css">
  <title>Get started with simpledotcss CDN - cdnhub.io</title>
</head>
<body>
  <button class="dot-button">Click me</button>
  <ul class="dot-list">
    <li class="dot-item">Item 1</li>
    <li class="dot-item">Item 2</li>
    <li class="dot-item">Item 3</li>
  </ul>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const dotButton = document.querySelector('.dot-button');
      const dotList = document.querySelector('.dot-list');

      dotButton.addEventListener('click', () => {
        const newDotItem = document.createElement('li');
        newDotItem.className = 'dot-item';
        newDotItem.textContent = 'New Item';
        dotList.appendChild(newDotItem);
      });
    });
  </script>

  <style>
    .dot-button {
      width: 100px;
      height: 50px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .dot-button:hover {
      background-color: #3e8e41;
    }

    .dot-item {
      list-style-type: none;
      margin-bottom: 10px;
      background-color: #f1f1f1;
      border-radius: 5px;
      padding: 10px;
      transition: background-color 0.3s;
    }

    .dot-item:hover {
      background-color: #ddd;
    }
  </style>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions