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”