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
2 thoughts on “CSS tutorial: 5 cool CSS button designs with hover effects”