Back
Learn to create a shape-shifting button that morphs through abstract geometries like an ever-evolving sculpture, bringing a touch of modern art to your UI.
<section class="abstract-button-container">
<button onclick="transformShape()" class="abstract-shape-button" aria-label="Transforming Abstract Shape Button">
<span class="button-label">Transform</span>
</button>
</section>
let transformed = false;
function transformShape() {
const button = document.querySelector('.abstract-shape-button');
transformed = !transformed;
if (transformed) {
button.style.clipPath = "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)";
button.style.background = "linear-gradient(135deg, rgba(103, 207, 255, 0.9), rgba(101, 58, 255, 0.9))";
button.classList.add('transformed-state');
} else {
button.style.clipPath = "polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%)";
button.style.background = "linear-gradient(135deg, rgba(255, 105, 97, 0.9), rgba(254, 203, 255, 0.9))";
button.classList.remove('transformed-state');
}
}
.abstract-button-container class uses flexbox to perfectly center our button in the middle of the viewport. This creates a minimalist space where the button can fully captivate the user's attention.
.abstract-button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
The .abstract-shape-button class is where the wonder unfolds. This button initially appears with a polygon shape, crafted through the use of CSS's clip-path feature. It also boasts a lively gradient and a smooth transition that brings the abstract shape to life upon clicking.
.abstract-shape-button {
border: none;
padding: 15px 30px;
border-radius: 20px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.7s, transform 0.3s, clip-path 0.7s;
cursor: pointer;
background: linear-gradient(135deg, rgba(255, 105, 97, 0.9), rgba(254, 203, 255, 0.9));
clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}
The .transformed-state class adds the final visual nudge for interaction by slightly scaling the button, giving a sense of depth and engagement as it morphs into a new form.
.transformed-state {
transform: scale(1.05);
}
This tutorial guide has demonstrated how to develop a button that defies conventional design. Merging bold visual elements and interactive transformations brings an artistic flair that can elevate UI experiences to new realms.<section class="abstract-button-container">
<button onclick="transformShape()" class="abstract-shape-button" aria-label="Transforming Abstract Shape Button">
<span class="button-label">Transform</span>
</button>
</section>
<script>
let transformed = false;
function transformShape() {
const button = document.querySelector('.abstract-shape-button');
transformed = !transformed;
if (transformed) {
button.style.clipPath = "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)";
button.style.background = "linear-gradient(135deg, rgba(103, 207, 255, 0.9), rgba(101, 58, 255, 0.9))";
button.classList.add('transformed-state');
} else {
button.style.clipPath = "polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%)";
button.style.background = "linear-gradient(135deg, rgba(255, 105, 97, 0.9), rgba(254, 203, 255, 0.9))";
button.classList.remove('transformed-state');
}
}
</script>
<style>
.abstract-button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.abstract-shape-button {
border: none;
padding: 15px 30px;
border-radius: 20px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.7s, transform 0.3s, clip-path 0.7s;
cursor: pointer;
background: linear-gradient(135deg, rgba(255, 105, 97, 0.9), rgba(254, 203, 255, 0.9));
clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}
.transformed-state {
transform: scale(1.05);
}
</style>
Thank you for reading this article.
Comments