This post contains a total of 7+ Hand-Picked CSS Button Click Effect Examples with Source Code. All the Buttons have Click Effects and are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
Click a Code to Copy it.
1. By javad moradkhah
Made by javad moradkhah. 3D CSS Button with Simple Click Effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<style>
:root {
--color-primary: #db32d8;
--font-size-btn: 2rem;
--translate-y-btn: 6px;
}
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.btn {
padding: 10px 20px;
color: #FFF;
font-size: var(--font-size-btn);
font-weight: bold;
background-color: var(--color-primary);
border: 0;
outline: 0;
border-radius: 0.5rem;
box-shadow: 0 var(--translate-y-btn) 0 #b52ab3;
cursor: pointer;
transition: 0.2s;
}
.btn:active {
box-shadow: none;
transform: translateY(var(--translate-y-btn));
}
</style>
</head>
<body>
<button class="btn">Click Here</button>
</body>
</html>2. By Ross James
Made by Ross James. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* Resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styles */
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #45b8;
}
/* Button Styles */
.btn {
height: 3.5rem;
padding: 0 2rem;
border-radius: 0.4rem;
border: none;
background: #4503dc;
color: #ffffff;
font-size: 16px;
box-shadow: 0 0.4rem 0 0 #3700b8;
letter-spacing: 3px;
transition: all 0.3s;
cursor: pointer;
}
.btn:active {
transform: translateY(0.3rem);
box-shadow: 0 0.2rem 0 0 #3700b8;
}
</style>
</head>
<body>
<button class="btn">Click Me</button>
</body>
</html>3. By danhua
Made by danhua. Button with simple click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
display:flex;
align-items:center;
justify-content:center;
height:50vh;
}
.b{
background-color:powderblue;
padding:10px 20px;
cursor:pointer;
box-shadow:4px 5px 2px #909090;
}
.b:hover{
background-color:lightskyblue;
}
.b:active{
transform:translateY(4px);
box-shadow:1px 2px 2px #909090;
}
</style>
</head>
<body>
<div class="container">
<div class="b">
Click Me
</div>
</div>
</body>
</html>4. By Jean-Marc Moeckel
Made by Jean-Marc Moeckel. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
text-align: center;
}
.btn-white {
color: white;
background-color: black;
text-decoration: none;
padding: 15px;
text-align: center;
position: relative;
top: 50vh;
width: 200px;
border-radius: 100px;
display: inline-block;
animation: Moving 4s ease-out;
}
.btn-white::after {
background-color: red;
width: 300px;
position: absolute;
}
.btn-white:hover {
transform: translateY(-3px);
box-shadow: -5px 10px 10px rgba(0, 0, 0, .4);
}
.btn-white:active {
transform: translateY(-1px);
box-shadow: -5px 3px 3px rgba(0, 0, 0, .4);
}
@keyframes {
0% {
opacity: 0;
transform: translateX(-100px;)
}
50% {
}
80% {
}
100% {
}
}
</style>
</head>
<body>
<html>
<div class="container">
<a href="#" class="btn-white">Button</a>
</div>
</body>
</html>5. By moghazi
Made by moghazi. CSS Button with hover and click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* ==================== Global ====================================== */
@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #222;
color: #eae0d0;
font-family: "Raleway", sans-serif;
height: 1000px;
scroll-behavior: smooth;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
:focus {
outline: none;
}
/* ==================== Header ========================================================================================== */
/* Button Style ========================== */
.border {
width: 250px;
padding: 20px;
margin: 200px auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 25px;
font-weight: bold;
border: none;
border-radius:3px;
background-color: #ffcc00;
cursor: pointer;
transition: 0.3s;
}
/* Button Click effect */
.border:active {
transform: scale(.50);
transition: .1s;
}
/* Button Download icon */
.border i {
margin-right: 14px;
font-size: 30px;
}
/* Before & After */
.border::before,
.border::after {
content: "";
position: absolute;
width: 30px;
height: 9px;
background-color: inherit;
transition: all 0.3s ease-in-out;
border-radius: 30% 30% / 30% 100%;
}
/* Before */
.border::before {
top: -13px;
left: 0;
}
/* After */
.border::after {
bottom: -13px;
right: 0;
}
/* Hover */
.border:hover::before,
.border:hover::after {
width: 100%;
}
</style>
</head>
<body>
<button class="border">
<i class="fas fa-download"></i>
Download
</button>
</body>
</html>6. By Peter
Made by Peter. Button with ripple click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
button {
background-color: red;
height:100px;
width:180px;
cursor:pointer;
position: relative;
overflow: hidden;
padding: 16px 32px;
}
/*Removed the button click effect*/
button:active { border-style: outset;}
button:after {
content: '';
display: block;
position: absolute;
left: 10%;
top: 50%;
width: 180px;
height: 120px;
margin-left: -20px;
margin-top: -60px;
background: #3f51b5;
/*border-radius: 100%;*/
opacity: .6;
transform: scale(0);
}
@keyframes ripple {
0% {
transform: scale(0);
}
20% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
button:not(:active):after {
animation: ripple 1s ease-out;
}
/* fixes initial animation run, without user input, on page load.
*/
button:after {
visibility: hidden;
}
button:focus:after {
visibility: visible;
}
</style>
</head>
<body>
<button>Twitter &&</button>
</body>
</html>7. By CodingDecoding
Made by CodingDecoding. Pure CSS 3D Button with Click Effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
button
{
width: 300px;
height: 100px;
border: none;
outline: none;
border-radius: 20px;
background: rgba(255,0,0,0.6);
color: #fff;
font-size: 35px;
box-shadow: 0 9px #999;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button:hover
{
background: rgba(255,0,0,0.8);
}
button:active
{
box-shadow: 0 5px #666;
transform: translatey(4px) translate(-50%, -50%);
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>8. By CodingPencil
Made by CodingPencil. Font awesome button click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand", sans-serif;
}
:root {
--bg-clr: #ffd43b;
--text-clr: #183153;
--border: 3px solid var(--text-clr);
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
background: #ffd43b;
color: var(--text-clr);
padding: 20px;
font-size: larger;
border: var(--border);
border-radius: 20px;
border-bottom: 8px solid var(--text-clr);
font-weight: 600;
cursor: pointer;
}
button:active {
border-bottom: var(--border);
transform: translateY(5px);
}
button:hover {
background: #fab005;
}
</style>
</head>
<body>
<button>
<i class="fa-solid fa-font-awesome"></i>
Fontawesome
</button>
</body>
</html>