7+ CSS Button Click Effect Examples

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

button with click effect made by ross james
<!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>