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!