topic: CSS by Milos Protic relates to: Web Development, Design on June, 15 2019
4 Beautiful CSS Button Designs
Introduction
These days, we cannot say that a website appearance is not important. It's not uncommon that users have a low level of tolerance for badly designed websites. Luckily, with the CSS3, and the browser support behind it, we can create beautiful web pages and components. In this article, I will cover button designs I find attractive.
Without further talk, let's dive into it.
1. 3d Rotation
Html
<a class="rotate-button">
<span class="rotate-button-face">Super</span>
<span class="rotate-button-face-back">Cool</span>
</a>
Css
.rotate-button {
display:inline-block;
width:150px;
height: 30px;
text-align:center;
transform-style:preserve-3d;
cursor:pointer;
transition:all .3s ease;
font-family: 'arial'
}
.rotate-button .rotate-button-face, .rotate-button .rotate-button-face-back {
position:absolute;
display:block;
border:1px solid #35495e;
transition:all .5s;
color:#35495e;
text-decoration:none;
width:150px;
height: 30px;
line-height:30px;
border-radius: 4px;
}
.rotate-button .rotate-button-face {
background-color:#fff;
transform:translateZ(15px);
}
.rotate-button .rotate-button-face-back {
background-color:#35495e;
color:#42b883;
border:1px solid #42b883;
transform:rotateX(-90deg) translateZ(15px);
}
.rotate-button:hover {
transform:rotateX(90deg);
}
Check out the live fiddle at the end of this article
2. Smooth Fill
Html
<a class="fill-button">
<span class="fill-button-hover">
<span class="fill-button-text">Super Cool</span>
</span>
</a>
CSS
.fill-button {
position: relative;
overflow:hidden;
display:inline-block;
width:150px;
height:30px;
border:1px solid #35495e;
text-align:center;
box-sizing:border-box;
color:#35495e;
text-decoration:none;
cursor: pointer;
line-height:28px;
font-family: 'arial';
border-radius: 4px;
}
.fill-button > span {
display:block;
}
.fill-button > .fill-button-hover:after, .fill-button > .fill-button-hover:before {
position:absolute;
top:0;
opacity:0;
display:block;
content:"";
width:0;
height:30px;
}
.fill-button > .fill-button-hover:after {
background-color:#35495e;
transform:skewX(45deg);
transform-origin:center center;
transition:all .35s, opacity .4s;
left:50%;
}
.fill-button .fill-button-hover:before {
background-color:#42b883;
transition:opacity 1s;
}
.fill-button .fill-button-text {
z-index:1;
position:relative;
color:#35495e;
transition:color .35s;
}
.fill-button:hover .fill-button-text {
color:#42b883;
}
.fill-button .fill-button-hover:hover:after {
opacity:1;
left:2%;
width:95%;
transform:skewX(45deg);
}
.fill-button > .fill-button-hover:hover:before {
opacity: 1;
left: 0;
width:100%;
}
Check out the live fiddle at the end of this article
3. Border Animated
Html
<a class="border-button">
<span>Super Cool</span>
</a>
CSS
.border-button {
position:relative;
display:inline-block;
width:150px;
height:30px;
background-color:#d9f0e6;
line-height:29px;
color:#35495e;
font-family:'arial';
text-align:center;
text-decoration:none;
cursor: pointer;
border-radius: 4px;
overflow:hidden
}
.border-button:after {
position:absolute;
display:block;
content:"";
width:100%;
height:1px;
background-color:#42b883;
transform:scale3d(0,1,1);
transform-origin:left;
transition:transform .3s;
}
.border-button:hover:after {
transform:scale3d(1,1,1);
}
Check out the live fiddle at the end of this article
4. Flip
Html
<a class="button-flip">
<span class="button-flip-face">Super</span>
<span class="button-flip-face-back">Cool</span>
</a>
CSS
.button-flip {
display: inline-block;
position: relative;
width: 150px;
height:30px;
text-align:center;
font-family: 'arial';
transform-style: preserve-3d;
cursor: pointer;
box-sizing:border-box;
transition:all 0.5s ease;
}
.button-flip > .button-flip-face, .button-flip > .button-flip-face-back {
position: absolute;
top: 0;
display: block;
width: 100%;
height:30px;
line-height: 28px;
border:1px solid #35495e;
color:#35495e;
border-radius: 4px;
overflow: hidden;
transition:all 0.5s ease;
}
.button-flip > .button-flip-face-back {
opacity: 0;
color: transparent;
background-color:#35495e;
transform: rotateY(180deg);
}
.button-flip:hover > .button-flip-face {
opacity: 0;
color: transparent;
}
.button-flip:hover > .button-flip-face-back {
opacity: 1;
color:#42b883;
}
.button-flip:hover {
transform: rotateY(180deg);
}
A live fiddle:
That's it! Feel free to use these buttons as you see fit. If you've like what you see, do share it, and consider buying me a coffee to keep me juiced up for more CSS styling.
Thank you for reading and see you in the next article.
Subscribe to get the latest posts delivered right to your inbox