100 Modern CSS Buttons. Every style that you can imagine.
https://ui-buttons.web.app/<!DOCTYPE html>
<html>
<body>
<div class="cont">
<button class="btn"><span>Click me</span><img src="https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png" height="62" width="62"></button>
</div>
<style>
@-webkit-keyframes {
}
@-webkit-keyframes extend {
0% {
width: 600px;
height: 200px;
border-radius: 100px;
} 10% {
width: 610px;
height: 210px;
background: #fff;
margin-left: - 5px;
margin-top: - 5px;
} 20% {
width: 600px;
height: 200px;
background: #6fb07f;
margin-left: 0px;
margin-top: 0px;
} 100% {
width: 200px;
height: 200px;
border-radius: 100px;
margin-left: 190px;
background: #6fb07f;
}
}
@keyframes extend {
0% {
width: 600px;
height: 200px;
border-radius: 100px;
} 10% {
width: 610px;
height: 210px;
background: #fff;
margin-left: - 5px;
margin-top: - 5px;
} 20% {
width: 600px;
height: 200px;
background: #6fb07f;
margin-left: 0px;
margin-top: 0px;
} 100% {
width: 200px;
height: 200px;
border-radius: 100px;
margin-left: 190px;
background: #f04014;
}
}
@-webkit-keyframes {
}
@-webkit-keyframes disappear {
0% {
opacity: 1;
} 20% {
color: #fff;
} 100% {
opacity: 0;
}
}
@keyframes disappear {
0% {
opacity: 1;
} 20% {
color: #fff;
} 100% {
opacity: 0;
}
}
@-webkit-keyframes {
}
@-webkit-keyframes appear {
0% {
opacity: 0;
} 70% {
opacity: 0;
} 100% {
opacity: 1;
}
}
@keyframes appear {
0% {
opacity: 0;
} 70% {
opacity: 0;
} 100% {
opacity: 1;
}
}
html {
background: rgb(165, 165, 165)
}
input, button, submit {
border: none
}
.cont {
position: absolute;
width: 610px;
height: 10px;
left: 50%;
top: 50%;
margin: -100px 0 0 -300px
}
button {
border-width: 1px;
width: 600px;
height: 200px;
/*border-radius*/
border-radius: 100px;
background: #fff;
position: absolute;
border: 5px solid #09ec42
}
button > span {
font-size: 48px;
color: #06a19a
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0
}
button:focus {
/*animation*/
-webkit-animation: extend 1s ease-in-out;
-ms-animation: extend 1s ease-in-out;
animation: extend 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
/* Chrome, Safari, Opera */
animation-fill-mode: forwards
}
button:focus > span {
/*animation*/
-webkit-animation: disappear 1s ease-in-out;
-ms-animation: disappear 1s ease-in-out;
animation: disappear 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
/* Chrome, Safari, Opera */
animation-fill-mode: forwards
}
button:focus > img {
/*animation*/
-webkit-animation: appear 1s ease-in-out;
-ms-animation: appear 1s ease-in-out;
animation: appear 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
/* Chrome, Safari, Opera */
animation-fill-mode: forwards
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
//Removing article link when on mobiforge
console.log(document.referrer);
if (parent !== window && document.referrer.indexOf('https://mobiforge.com') === 0 && document.referrer.indexOf('http://mobiforge.com') === 0)
{
console.log(document.referrer);
document.getElementById('article-link').className = "fade-out";
}
});
</script>
</body>
</html>