In this tutorial, we’ll dive into designing a set of eye-catching, large-scale icon buttons that not only look great but also provide a seamless user experience. Using a combination of HTML, CSS, and Feather Icons, we’ll create a layout with smooth animations and vibrant gradients that change when a button is clicked. Whether you’re building a dashboard, a navigation bar, or any other interactive element, this guide will help you craft buttons that users will love to engage with. Perfect for adding that extra touch of elegance and functionality to your web projects!
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
</head>
<body>
<div class='buttons'>
<a href='#' title='Home'>
<i data-feather="home"></i>
</a>
<a href='#' title='Settings'>
<i data-feather="settings"></i>
</a>
<a href='#' title='Posts'>
<i data-feather="list"></i>
</a>
<a href='#' title='Profile'>
<i data-feather="user"></i>
</a>
</div>
<style>
html {
display: table;
width: 100%;
height: 100%;
}
body {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
background-color: #ffffff; /* Plain white background */
}
.buttons {
white-space: nowrap;
min-height: 33px;
position: relative;
width: 205px;
margin: 0 auto;
transform: scale(3);
}
.buttons a {
animation: bounceInDown 900ms 200ms ease-in-out both;
width: 50px;
height: 40px;
position: absolute;
top: 0;
text-decoration: none;
outline-width: 0px;
z-index: 990;
color: #ffffff;
text-align: center;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons a svg {
width: 20px;
height: 20px;
}
.buttons a:not(.active) {
box-shadow: inset 0 1px 1px rgba(72, 67, 79, 0.8),
inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3),
0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #2e2737;
background-image: linear-gradient(#DAA520, #8B7500); /* Dark yellow gradient */
text-shadow: 0 0 21px rgba(198, 212, 220, 0.5), 0 -1px 0 #2e2737;
}
.buttons a:not(.active):hover,
.buttons a:not(.active):focus {
transition: color 200ms linear, text-shadow 500ms linear;
color: #f0f0f0;
text-shadow: 0 0 21px rgba(198, 212, 220, 0.5),
0 0 10px rgba(198, 212, 220, 0.4), 0 0 2px #252b3a;
}
.buttons a:not(.active):active {
color: #e4e3ce !important;
}
.buttons a.active,
.buttons a:active {
box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #1f2433,
0 2px 1px 0 rgba(79, 107, 157, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2);
background-image: linear-gradient(#FFD700, #B8860B); /* Darker shade of yellow gradient for active state */
text-shadow: 0 0 21px rgba(198, 212, 220, 0.5),
0 0 10px rgba(198, 212, 220, 0.4), 0 0 2px #2a153c;
color: #e4e3ce;
}
.buttons a.active:before,
.buttons a:active:before {
position: absolute;
display: block;
content: "";
width: 1px;
height: 100%;
top: 1px;
left: -2px;
background-image: linear-gradient(
rgba(91, 35, 105, 0),
#5b2369 41%,
#5b2369 59%,
rgba(91, 35, 105, 0)
);
box-shadow: -2px 0 6px 0 #5b2369;
}
.buttons a.active:after,
.buttons a:active:after {
position: absolute;
display: block;
content: "";
width: 1px;
height: 36px;
top: 1px;
right: -2px;
background-image: linear-gradient(
rgba(91, 35, 105, 0),
#5b2369 41%,
#5b2369 59%,
rgba(91, 35, 105, 0)
);
box-shadow: 2px 0 6px 0 #5b2369;
}
.buttons a.active {
z-index: 1000;
}
.buttons a:active {
z-index: 999;
}
.buttons a:last-of-type {
border-radius: 0 7px 7px 0;
}
.buttons a:first-of-type {
border-radius: 7px 0 0 7px;
left: 0;
}
.buttons a:nth-of-type(2) {
left: 51px;
}
.buttons a:nth-of-type(3) {
left: 102px;
}
.buttons a:nth-of-type(4) {
left: 153px;
}
.buttons a:nth-of-type(5) {
left: 204px;
}
.buttons a:nth-of-type(6) {
left: 255px;
}
.buttons a:nth-of-type(7) {
left: 306px;
}
.buttons a:nth-of-type(8) {
left: 357px;
}
.buttons a i:before {
margin-left: 2px;
font-size: 22px;
}
.buttons a i.icon-bar-chart:before {
font-size: 20px;
margin-top: 0px;
}
.buttons a i.icon-sync:before {
font-size: 20px;
margin-left: 3px;
margin-top: 1px;
}
.buttons a i.icon-download:before {
font-size: 19px;
margin-top: 1px;
margin-left: 4px;
}
p {
position: absolute;
bottom: 50px;
left: 13px;
right: 50px;
color: #a99bad;
font-family: Helvetica, sans-serif;
font-size: 10px;
margin-top: 250px;
margin-left: 50px;
}
p > a {
color: white;
font-weight: bold;
}
</style>
<script>
feather.replace();
document.querySelectorAll('.buttons a').forEach(function(button) {
button.addEventListener('click', function() {
document.querySelectorAll('.buttons a').forEach(function(btn) {
btn.classList.remove('active');
});
this.classList.add('active');
});
});
</script>
</body>
</html>
