<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="container">
<h1>3D Round Buttons</h1>
<p class="subtitle">Pure HTML & CSS 3D buttons with realistic depth and shadows</p>
<div class="button-showcase">
<div class="button-item">
<button class="btn-3d">Click Me</button>
<span class="button-label">Blue Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-green">Success</button>
<span class="button-label">Green Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-orange">Alert</button>
<span class="button-label">Orange Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-red">Delete</button>
<span class="button-label">Red Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-pink">Favorite</button>
<span class="button-label">Pink Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-teal">Start</button>
<span class="button-label">Teal Button</span>
</div>
</div>
<div class="button-showcase">
<div class="button-item">
<button class="btn-3d btn-large btn-dark">Large</button>
<span class="button-label">Large Size</span>
</div>
<div class="button-item">
<button class="btn-3d btn-small btn-orange">Small</button>
<span class="button-label">Small Size</span>
</div>
<div class="button-item">
<button class="btn-3d btn-icon btn-green">
<ion-icon name="heart"></ion-icon>
</button>
<span class="button-label">Icon Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-icon btn-red">
<ion-icon name="play"></ion-icon>
</button>
<span class="button-label">Play Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-icon">
<ion-icon name="add"></ion-icon>
</button>
<span class="button-label">Add Button</span>
</div>
<div class="button-item">
<button class="btn-3d btn-icon btn-teal">
<ion-icon name="download"></ion-icon>
</button>
<span class="button-label">Download Button</span>
</div>
</div>
<div class="info-section">
<h2>
<ion-icon name="code-slash-outline"></ion-icon>
CSS Code Example
</h2>
<div class="code-block">
<span class="tag">.btn-3d</span> {
<span class="property">width</span>: <span class="value">120px</span>;
<span class="property">height</span>: <span class="value">120px</span>;
<span class="property">border-radius</span>: <span class="value">50%</span>;
<span class="property">background</span>: <span class="value">linear-gradient(145deg, #4facfe 0%, #00f2fe 100%)</span>;
<span class="property">box-shadow</span>:
<span class="value">0 8px 15px rgba(79, 172, 254, 0.3)</span>,
<span class="value">0 15px 35px rgba(0, 242, 254, 0.2)</span>,
<span class="value">inset 0 -8px 15px rgba(0, 0, 0, 0.15)</span>,
<span class="value">inset 0 8px 20px rgba(255, 255, 255, 0.3)</span>;
<span class="property">transition</span>: <span class="value">all 0.3s ease</span>;
}
<span class="tag">.btn-3d:hover</span> {
<span class="property">transform</span>: <span class="value">translateY(-5px)</span>;
<span class="property">box-shadow</span>:
<span class="value">0 12px 25px rgba(79, 172, 254, 0.4)</span>,
<span class="value">0 20px 45px rgba(0, 242, 254, 0.3)</span>,
<span class="value">inset 0 -8px 15px rgba(0, 0, 0, 0.15)</span>,
<span class="value">inset 0 8px 20px rgba(255, 255, 255, 0.4)</span>;
}
<span class="tag">.btn-3d:active</span> {
<span class="property">transform</span>: <span class="value">translateY(2px)</span>;
<span class="property">box-shadow</span>:
<span class="value">0 4px 10px rgba(79, 172, 254, 0.3)</span>,
<span class="value">0 8px 20px rgba(0, 242, 254, 0.2)</span>,
<span class="value">inset 0 -4px 10px rgba(0, 0, 0, 0.2)</span>,
<span class="value">inset 0 4px 10px rgba(255, 255, 255, 0.2)</span>;
}
</div>
<h2 style="margin-top: 30px;">
<ion-icon name="sparkles-outline"></ion-icon>
Key Features
</h2>
<div class="feature-list">
<div class="feature-card">
<h3>
<ion-icon name="cube-outline"></ion-icon>
Realistic 3D Effect
</h3>
<p>Multiple box-shadows create depth with both outer shadows and inset highlights for a true 3D appearance.</p>
</div>
<div class="feature-card">
<h3>
<ion-icon name="color-palette-outline"></ion-icon>
Gradient Colors
</h3>
<p>Linear gradients provide smooth color transitions that enhance the 3D effect.</p>
</div>
<div class="feature-card">
<h3>
<ion-icon name="hand-left-outline"></ion-icon>
Interactive States
</h3>
<p>Hover and active states with transform animations make the buttons feel pressable.</p>
</div>
<div class="feature-card">
<h3>
<ion-icon name="resize-outline"></ion-icon>
Multiple Sizes
</h3>
<p>Easily customizable sizes from small to large to fit any design need.</p>
</div>
<div class="feature-card">
<h3>
<ion-icon name="images-outline"></ion-icon>
Icon Support
</h3>
<p>Works perfectly with icon libraries like Ionicons for modern UI designs.</p>
</div>
<div class="feature-card">
<h3>
<ion-icon name="phone-portrait-outline"></ion-icon>
Responsive
</h3>
<p>Fully responsive and touch-friendly for mobile devices and tablets.</p>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
padding: 50px 40px;
width: 100%;
max-width: 1000px;
}
h1 {
font-size: 32px;
color: #333;
margin-bottom: 10px;
text-align: center;
font-weight: 600;
}
.subtitle {
color: #666;
font-size: 15px;
margin-bottom: 40px;
text-align: center;
}
.button-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.button-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.button-label {
font-size: 14px;
font-weight: 600;
color: #555;
text-align: center;
}
/* Basic 3D Round Button */
.btn-3d {
width: 120px;
height: 120px;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
background: linear-gradient(145deg, #4facfe 0%, #00f2fe 100%);
box-shadow:
0 8px 15px rgba(79, 172, 254, 0.3),
0 15px 35px rgba(0, 242, 254, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: 700;
}
.btn-3d:hover {
transform: translateY(-5px);
box-shadow:
0 12px 25px rgba(79, 172, 254, 0.4),
0 20px 45px rgba(0, 242, 254, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.4);
}
.btn-3d:active {
transform: translateY(2px);
box-shadow:
0 4px 10px rgba(79, 172, 254, 0.3),
0 8px 20px rgba(0, 242, 254, 0.2),
inset 0 -4px 10px rgba(0, 0, 0, 0.2),
inset 0 4px 10px rgba(255, 255, 255, 0.2);
}
/* Green Button */
.btn-green {
background: linear-gradient(145deg, #56ab2f 0%, #a8e063 100%);
box-shadow:
0 8px 15px rgba(86, 171, 47, 0.3),
0 15px 35px rgba(168, 224, 99, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
}
.btn-green:hover {
box-shadow:
0 12px 25px rgba(86, 171, 47, 0.4),
0 20px 45px rgba(168, 224, 99, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.4);
}
/* Orange Button */
.btn-orange {
background: linear-gradient(145deg, #f7931e 0%, #ff6b35 100%);
box-shadow:
0 8px 15px rgba(247, 147, 30, 0.3),
0 15px 35px rgba(255, 107, 53, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
}
.btn-orange:hover {
box-shadow:
0 12px 25px rgba(247, 147, 30, 0.4),
0 20px 45px rgba(255, 107, 53, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.4);
}
/* Red Button */
.btn-red {
background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%);
box-shadow:
0 8px 15px rgba(235, 51, 73, 0.3),
0 15px 35px rgba(244, 92, 67, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
}
.btn-red:hover {
box-shadow:
0 12px 25px rgba(235, 51, 73, 0.4),
0 20px 45px rgba(244, 92, 67, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.4);
}
/* Pink Button */
.btn-pink {
background: linear-gradient(145deg, #fc4a1a 0%, #f7b733 100%);
box-shadow:
0 8px 15px rgba(252, 74, 26, 0.3),
0 15px 35px rgba(247, 183, 51, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
}
.btn-pink:hover {
box-shadow:
0 12px 25px rgba(252, 74, 26, 0.4),
0 20px 45px rgba(247, 183, 51, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.4);
}
/* Teal Button */
.btn-teal {
background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);
box-shadow:
0 8px 15px rgba(17, 153, 142, 0.3),
0 15px 35px rgba(56, 239, 125, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
}
.btn-teal:hover {
box-shadow:
0 12px 25px rgba(17, 153, 142, 0.4),
0 20px 45px rgba(56, 239, 125, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.4);
}
/* Dark Button */
.btn-dark {
background: linear-gradient(145deg, #2c3e50 0%, #34495e 100%);
box-shadow:
0 8px 15px rgba(44, 62, 80, 0.3),
0 15px 35px rgba(52, 73, 94, 0.2),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.2);
}
.btn-dark:hover {
box-shadow:
0 12px 25px rgba(44, 62, 80, 0.4),
0 20px 45px rgba(52, 73, 94, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.15),
inset 0 8px 20px rgba(255, 255, 255, 0.3);
}
/* Large Button */
.btn-large {
width: 180px;
height: 180px;
font-size: 24px;
}
/* Small Button */
.btn-small {
width: 80px;
height: 80px;
font-size: 14px;
}
/* Icon Button */
.btn-icon {
font-size: 0;
}
.btn-icon ion-icon {
font-size: 48px;
}
.info-section {
background: #f8f9fa;
border-radius: 12px;
padding: 30px;
margin-top: 40px;
}
.info-section h2 {
font-size: 24px;
color: #2c5364;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 10px;
font-family: 'Courier New', monospace;
font-size: 13px;
overflow-x: auto;
margin: 15px 0;
line-height: 1.8;
}
.code-block .tag {
color: #ff79c6;
}
.code-block .class {
color: #f1fa8c;
}
.code-block .property {
color: #8be9fd;
}
.code-block .value {
color: #50fa7b;
}
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.feature-card {
background: white;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #4facfe;
}
.feature-card h3 {
color: #2c5364;
margin-bottom: 10px;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.feature-card p {
color: #666;
font-size: 14px;
line-height: 1.6;
}
@media (max-width: 768px) {
.container {
padding: 30px 20px;
}
h1 {
font-size: 24px;
}
.button-showcase {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 30px;
}
.btn-3d {
width: 100px;
height: 100px;
font-size: 16px;
}
.btn-large {
width: 140px;
height: 140px;
font-size: 20px;
}
.btn-small {
width: 70px;
height: 70px;
font-size: 12px;
}
.btn-icon ion-icon {
font-size: 38px;
}
}
No comments yet. Be the first!