CSS tutorial: 5 cool CSS button designs with hover effects

As a web developer, one of the most basic things you should know is how to design a button. With HTML only, you get a bland boring button with no hover effects. This CSS button tutorial will explain the magic behind 5 cool CSS button designs, with hover effects. The buttons' designs shall range from easy to complex. Each CSS code snippet shall contain comments that explain what every line of code does. These button designs shall include: rounding button on hover, filling a button on hover, sliding a button on hover, making a gradient button and a skewed slide effect on hover  

1) CSS rounded button on hover effect

This button looks faded and rectangular. When you hover the cursor over the button, it becomes a rounded button with a darker shade. In addition, the mouse cursor changes.  

HTML:


<html> <!--Creates a button --> <button> TOUCH ME </button> </html>
 

CSS:

* {

  /** All button properties will get a hover transition effect */
  transition-property: all;
  /* transition animation lasts for 1.5 seconds */
  transition-duration: 1.5s;
  /* Transition eases through*/
  transition-timing-function: ease;
}

body{
  width: 100%;
  height: 100%;
}
button {
  /* Increases width and height by 200 x 80 pixels */
  width: 200px;
  height: 80px;
  /* Increase text size and boldness */
  font-size: 25px;
  font-weight: bold;
  /* Position of button on screen */
  margin-left: 40%;
  margin-top: 200px;
  /* Background and text color */
  background-color: #D0FF76;
  color: #333;
  /* Drops opacity of button to make it lighter */
  opacity: 0.8;
  /* Button border width, color and style */
  border: 2px white solid;
  /* Changes the cursor */
  cursor: grab;
}

button:hover {
  
  /* Upon hover, the border radius increases, making it curve */
  border-radius: 100px;
  /* Button becomes fully opaque and darker */
  opacity: 1;
  /* Border color changes to white */
  border-color: black;
  
}
 

See the Pen Rounded button on hover by Enjeck Cleopatra (@ProTechThor) on CodePen.default

 

2) CSS Fill button on hover

This button is plain and empty. Upon hover, the button fills up and becomes colored.

HTML:


<div class="fill-button"> <a href="#" class="button">Hover Me!</a> </div>

CSS:

.fill-button {

/* Position of button */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -86px;
	margin-left: -89px;
/* Centers the text */
	text-align: center;
}

a {
/* Speed and nature of the button transition */
	-webkit-transition: all 600ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-moz-transition: all 600ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-o-transition: all 600ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	transition: all 600ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
/* button gets displayed in its own block */
	display: block;
	margin: 20px auto;
/* Width of button. On smaller screens, the button size scales to fit */
	max-width: 180px;
/* By default, anchor texts are underlined.This removed the underline */
	text-decoration: none;
/* Curves the button edges */
	border-radius: 4px;
/* Gives some spacing around the button text and edges */
	padding: 20px 30px;
}

a.button {
/* Button color and shadow */
	color: rgba(30, 22, 54, 0.6);
	box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}

a.button:hover {
/* Changes the button solor and shadow upon hover */
	color: rgba(255, 255, 255, 0.85);
	box-shadow: rgba(30, 22, 54, 0.7) 0 0px 0px 40px inset;
}
  
}

See the Pen Fill in button by Enjeck Cleopatra (@ProTechThor) on CodePen.default

3) CSS button slide on hover

This button is plain and colored. Upon hover, the button slides to the right and displays another button on the left.

HTML:


<div> <div class="button"> <p class="btnText">HOVER</p> <div class="btn"> <p class="btnText2">X</p> </div> </div> </div>

CSS:

/*Imports Roboto from Google fonts */
@import 
 url(https://fonts.googleapis.com/css?family=Roboto:700);
html, body {
  
  /* Background color */
  background : #eee; 
  /* Text font */
  font-family : Roboto; 
  /* Background covers the entire page */
  height: 100%; 
  width: 100%; 
  /* No margin */
  margin: 0;}

.button {
  position: relative;
  
  /* Position from top of screen */
  top: 200px;
  /* button color */
  background: #3D4C53;
  margin : 20px auto;
  
  /* Button size */
  width : 200px;
  height : 50px;
  /* Hides the "X" */
  overflow: hidden;
  /* Centers the shown text */
  text-align : center;
  /* Duration of hover transition */
  transition : .4s;
  /* Pointer cursor implemented */
  cursor : pointer;
  /* Curves the edges of the button */
  border-radius: 3px;
}
.btn {
  position : relative;
  /* Button size  and position*/
  width : 200px;
  height : 100px;
  margin-top: -100px;
  padding-top: 2px;
  /* Button color */
  background : #26A69A;
  /* Shows the first text "Hover" while hiding "X" */
  left : -250px;
  /* Transition duration */
  transition : .3s;
}
.btnText {
  /* Color and timing of "hover" text */
  color : #fff;
  transition : .3s;
}

.btnText2 {
  margin-top : 63px;
  /* Hides the "X" button by sending it to the right */
  margin-right : -130px;
  /* Button color to white */
  color : #FFF;
}

.button:hover .btn{ /*When hovering over .button change .btn*/
  left: -130px;
}
.button:hover .btnText{ /*When hovering over .button change .btnText*/
  margin-left : 65px;
}

See the Pen Button slide with icon by Enjeck Cleopatra (@ProTechThor) on CodePen.default

4) Gradient CSS button hover

This button has a gradient background. When hovered, the background moves.

HTML:


<div class="button"> <button class="btn-hover color">HOVER</button> </div>

CSS:

* {
  /*padding and border are included in the width and height of all elements */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button {
    margin: 10%;
  /* Centralize text */
    text-align: center;
}

.btn-hover {
  /* Button size */
  height: 55px;
    width: 200px;
  /* Text size and boldness*/
    font-size: 16px;
    font-weight: 600;
  /* Text color */
    color: #fff;
  /* Cursor pointer */
    cursor: pointer;
  /* Margin around button */
    margin: 20px;
  /* Removes default border around buttons */
    border: none;
  /* Fills the button with gradient */
    background-size: 300% 100%;
/* Curves the button */
    border-radius: 50px;
  
  /* Transition duration and time */
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-hover:hover {
  /* Changes gradient position on hover to give the illusion of motion */
    background-position: 100% 0;
  /* Duration of gradient transition */
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-hover.color {
  /* Button gradient color */
        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
  /* Gives the button a shadow for a neon-like glow */
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
}

See the Pen Gradient Button Hover by Enjeck Cleopatra (@ProTechThor) on CodePen.default

5) Skewed button slide effect on hover

This button has a skewed line on the button left. When a cursor is hovered upon it, the skewed line moves to fill the button with color.

HTML:


<div class="button_container"> <button class="btn"><span>HOVER ME!</span></button> </div>

CSS:

.button_container {

/* Button position on the screen */
position: absolute;
left: 0;
right: 0;
top: 20%;
}

.btn {
/* Removes default button border */
border: none;
display: block;
/* Centralized the text */
text-align: center;
/* Changes to cursor to a pointer */
cursor: pointer;
/* Hides the skewed box, only showing it within the button */
overflow: hidden;
position: relative;
/* White text color and bold font*/
color: #fff;
font-weight: 700;
/* Text size */
font-size: 15px;
/* Black background color */
background-color: #222;
/* Some space around the text */
padding: 17px 60px;
/* Horizontally centers the button */
margin: 0 auto;
/* Faint box shadow to give a pop-up effect */
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn span {
position: relative;
/* Brings the text to the top of the screen. A higher z-index means it gets displayed on top of other elements. When the skewed line slides over it, the text stays on top */
z-index: 1;
}

/* Creating the skewed sliding line. This is actually a box, but will be partially hidden */
.btn:after {
content: "";
position: absolute;
/* Position of the skewed line*/
left: 0;
top: 0;
/* Size of the skewed line*/
height: 490%;
width: 140%;
/* Background color of the skewed line */
background: #78c7d2;
/* Duration of the slide */
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;

/* makes the line skewed/slanted. Without this, it will be a straight line */
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn:hover:after {
/* Moves the skewed line when the button is hovered */
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

See the Pen Skewed button slide effect on hover by Enjeck Cleopatra (@ProTechThor) on CodePen.default

Posted in: CSS

2 thoughts on “CSS tutorial: 5 cool CSS button designs with hover effects”

Leave a Reply

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