button hover effect,css button hover effect,button hover effects css,button hover effect css

How to Create Button Hover/Click Effects By Kainat Ijaz. Learn Awesome Buttons Hover Effects Using Only HTML & CSS @informativeworld713. Animation Tutorial For Beginners to Advance in Hindi/Urdu: In this CSS3 tutorial in Hindi/Urdu we will learn everything you need to learn about CSS from scratch. #css #css3 #css3html5 #css3tutorial #csshovereffect #css3animation #html #html5 #htmltutorial #htmlcss2021


Buttons are an essential element in web design. They serve as calls to action, directing users to perform specific actions on a website. While the default button styles provided by CSS are functional, they can often be plain and lack visual interest. Thankfully, with the power of CSS, we can easily add hover and click effects to our buttons to make them more engaging and interactive.

Getting Started

To create awesome button effects with pure CSS, we need to understand the basic structure of a button in HTML. Buttons are usually created using the <button> element or the <input> element with the type attribute set to button. For this tutorial, we will be using the <button> element.

<button>Click Me</button>

By default, this button will have a plain appearance. Let’s start by adding a simple hover effect to it.

Adding a Hover Effect

A hover effect is triggered when the user hovers over an element with their mouse. To add a hover effect to our button, we can use the :hover pseudo-class in CSS.

button:hover {
  background-color: #ffcc00;
  color: #ffffff;

In the code above, we are changing the background color and text color of the button when it is hovered over. Feel free to customize these values to match your website’s design. With this simple CSS code, our button now has a hover effect that adds visual interest.

Adding a Click Effect

A click effect is triggered when the user clicks on an element. To add a click effect to our button, we can use the :active pseudo-class in CSS.

button:active {
  transform: scale(0.95);

In the code above, we are applying a scale transformation to the button when it is clicked on. This creates a subtle shrinking effect, giving the user visual feedback that the button has been clicked. Again, you can customize this effect by adjusting the scale value.

Combining Hover and Click Effects

Now that we have added both hover and click effects to our button, let’s combine them to create a more dynamic button experience. We can do this by using multiple pseudo-classes in CSS.

button:hover:active {
  background-color: #ff3300;
  color: #ffffff;
  transform: scale(0.95);

With this CSS code, our button will change its background color, text color, and scale when it is both hovered over and clicked on. Play around with different values to achieve the desired effect for your website.


By utilizing the power of CSS, we can easily create awesome button effects that enhance the user experience on our websites. Whether it’s a simple hover effect, a click effect, or a combination of both, these button effects can make our buttons more engaging and visually appealing. Experiment with different styles and effects to find what works best for your website’s design. Happy coding!


Watch Our More Videos On YouTube

<a href="#" class="cta">
  <span>Click me</span>
  <svg width="13px" height="10px" viewBox="0 0 13 10">
    <path d="M1,5 L11,5"></path>
    <polyline points="8 1 12 5 8 9"></polyline>
html, body {
  height: 100%;

body {
  display: grid;
  font-family: Avenir, sans-serif;
  color: #111;

a {
  text-decoration: none;
  color: inherit;

.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all 0.2s ease;
.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 28px;
  background: #69FDF0;
  width: 56px;
  height: 56px;
  transition: all 0.3s ease;
.cta span {
  position: relative;
  font-size: 16px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  vertical-align: middle;
.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
.cta:hover:before {
  width: 100%;
  background: #69FDF0;
.cta:hover svg {
  transform: translateX(0);
.cta:active {
  transform: scale(0.96);

Leave a Reply

Your email address will not be published. Required fields are marked *