1
Viele Webseiten, auf denen Code präsentiert wird, enthalten einen Button, mit dessen Hilfe der Code kopiert werden kann. Im Folgenden sehen Sie einen Codeblock, in den rechts oben ein Button zum Kopieren des Codes eingefügt wurde. Wenn Sie auf diesen Button klicken, wird der gezeigte Code kopiert und Sie können ihn anschließend beliebig weiter verwenden.
2.
Der unten gezeigte Code ist nicht nur ein beliebiger Webdesign-Code, sondern es ist der Code, mit dem der Button in den unten stehenden Codeblock eingefügt und gestylt wurde. Wenn Sie den gesamten Code kopieren und ihn dann im Browser betrachten, wird Ihnen das CSS-Element „.mein-css-code { background: #2d2d2d;}“ und der im Code-Block sichtbare Button zum Kopieren des Codes angezeigt werden.
Code zum Kopieren:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Code zum Kopieren</title>
<style>
/* Container für Code-Block */
.code-container {
position: relative;
margin: 2rem 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Button-Stil */
.copy-button {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
border: none;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 10;
}
/* Hover- & Active-Effekte */
.copy-button:hover {
background: linear-gradient(135deg, #5b7de8, #8f5fe1);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.copy-button:active {
transform: translateY(1px);
}
/* Icon-Stil */
.copy-icon {
font-size: 16px;
}
/* Animation beim Kopieren */
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Code-Block-Stil */
pre {
background: #2d2d2d;
color: #f8f8f8;
padding: 24px;
border-radius: 8px;
overflow-x: auto;
margin: 0;
font-family: 'Fira Code', monospace;
}
</style>
</head>
<body>
<div class="code-container">
<button class="copy-button">
<span class="copy-icon">⎘</span>
<span class="copy-text">Kopieren</span>
</button>
<pre><code class="code-content">
.mein-css-code {
background: #2d2d2d;
}
</code></pre>
</div>
<script>
document.querySelector('.copy-button').addEventListener('click', async () => {
const code = document.querySelector('.code-content').innerText;
try {
await navigator.clipboard.writeText(code.trim());
// Visuelle Bestätigung
const button = document.querySelector('.copy-button');
button.innerHTML = '<span class="copy-icon">✓</span><span class="copy-text">Kopiert!</span>';
button.style.background = '#4CAF50';
// Nach 2 Sekunden zurücksetzen
setTimeout(() => {
button.innerHTML = '<span class="copy-icon">⎘</span><span class="copy-text">Kopieren</span>';
button.style.background = 'linear-gradient(135deg, #6e8efb, #a777e3)';
}, 2000);
} catch (err) {
console.error('Fehler:', err);
button.innerHTML = '<span class="copy-icon">✗</span><span class="copy-text">Fehler!</span>';
button.style.background = '#FF5252';
}
});
</script>
</body>
</html>
3.
Wenn Sie auf Ihrer Website Code darstellen und ihn zum Kopieren anbieten wollen, müssen Sie nur folgende Schritte setzen:
a) Einfügen des CSS-Codes für den Kopier-Button und den zu kopierenden Bereich (Elemente pre und code):
.code-container {
position: relative;
margin: 2rem 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Button-Stil */
.copy-button {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
border: none;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 10;
}
/* Hover- & Active-Effekte */
.copy-button:hover {
background: linear-gradient(135deg, #5b7de8, #8f5fe1);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.copy-button:active {
transform: translateY(1px);
}
/* Icon-Stil */
.copy-icon {
font-size: 16px;
}
/* Animation beim Kopieren */
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Code-Block-Stil */
pre {
background: #2d2d2d;
color: #f8f8f8;
padding: 24px;
border-radius: 8px;
overflow-x: auto;
margin: 0;
font-family: 'Fira Code', monospace;
}
b) Einfügen der HTML-Sektion:
Diese besteht aus dem div-Block „<div class=“code-container“></div>“ sowie folgenden darin enthaltenen Elementen:
- dem Button mit der class „copy-button“
- zwei span-Elementen und
- dem zum Kopieren vorgesehene Codeblock innerhalb der CSS-Elemente <pre> und <code> – im obigen Beispiel:
.mein-css-code { background: #2d2d2d; }
<div class="code-container">
<button class="copy-button">
<span class="copy-icon">⎘</span>
<span class="copy-text">Kopieren</span>
</button>
<pre><code class="code-content">
.mein-css-code {
background: #2d2d2d;
}
</code></pre>
</div>
c) Einfügen des Javascript-Codes.
<script>
document.querySelector('.copy-button').addEventListener('click', async () => {
const code = document.querySelector('.code-content').innerText;
try {
await navigator.clipboard.writeText(code.trim());
// Visuelle Bestätigung
const button = document.querySelector('.copy-button');
button.innerHTML = '<span class="copy-icon">✓</span><span class="copy-text">Kopiert!</span>';
button.style.background = '#4CAF50';
// Nach 2 Sekunden zurücksetzen
setTimeout(() => {
button.innerHTML = '<span class="copy-icon">⎘</span><span class="copy-text">Kopieren</span>';
button.style.background = 'linear-gradient(135deg, #6e8efb, #a777e3)';
}, 2000);
} catch (err) {
console.error('Fehler:', err);
button.innerHTML = '<span class="copy-icon">✗</span><span class="copy-text">Fehler!</span>';
button.style.background = '#FF5252';
}
});
</script>
4.
Hier können Sie eine Datei downloaden, die den eingangs gezeigten Code sowie den Code für einen etwas einfacher gehaltenen Kopierbutton enthält: