xxxxxxxxxx
/* HTML */
<button class="animated-button">Click Me</button>
/* CSS */
@keyframes buttonHover {
0% {
background-color: #ffcc00;
transform: scale(1);
}
50% {
background-color: #ff9900;
transform: scale(1.2);
}
100% {
background-color: #ffcc00;
transform: scale(1);
}
}
.animated-button {
background-color: #ffcc00;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
animation: buttonHover 1s infinite; /* Apply animation on hover */
}
.animated-button:hover {
animation: none; /* Disable animation on hover */
background-color: #ff9900;
transform: scale(1.2);
}
xxxxxxxxxx
.button {
position: relative;
background-color: #04AA6D;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
xxxxxxxxxx
100 Modern CSS Buttons. Every style that you can imagine.
https://ui-buttons.web.app/
xxxxxxxxxx
/* Keyframes for the bounce effect */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
button {
background-color: #ff5733;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
animation: bounce 2s infinite;
}
<!-- HTML structure -->
xxxxxxxxxx
<head>
<style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
width:100vw;
height:100vh;
background:#efeeee;
display:grid;
place-items:center;
}
.container{
display:grid;
place-items:center;
cursor:pointer;
padding:4rem;
background:#efeeee;
border-radius:50%;
transition:all 0.3s ease-in;
box-shadow: 10px 10px 10px rgba(0,0,0,0.1),
-10px -10px 10px rgba(255,255,255,0.6);
}
.container .fas{
display:grid;
place-items:center;
font-size:4rem;
color:gray;
}
.container:active{
box-shadow: inset 10px 10px 10px rgba(0,0,0,0.1),
inset -10px -10px 10px rgba(255,255,255,0.6);
}
.container:active .fas{
color:#721efa;
}
</style>
</head>
<body>
<div class="container">
<i class="fas fa-play"></i>
</div>
</body>