Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fancy Buttons with Amazing Hover Effects
<h1>Fancy Buttons</h1>
<p>Hover over any button and enjoy the magic.</p>
<div class="buttons-coll">
<button class="custom-btn btn-1">Read More</button>
<button class="custom-btn btn-2">Read More</button>
<button class="custom-btn btn-3"><span>Read More</span></button>
<button class="custom-btn btn-4"><span>Read More</span></button>
<button class="custom-btn btn-5"><span>Read More</span></button>
<button class="custom-btn btn-6"><span>Read More</span></button>
<button class="custom-btn btn-7">Read More</button>
<button class="custom-btn btn-8">Read More</button>
<button class="custom-btn btn-9">Read More</button>
<button class="custom-btn btn-10">Read More</button>
<button class="custom-btn btn-11">Read More</button>
<button class="custom-btn btn-12">Read More</button>
</div>
// All of these buttons designed by me: Ahmed Beheiry
// find me on
// My Website: http://www.ahmedbeheiry.tk/
// FB: https://www.facebook.com/Ahmed.Beheiryy
// Linkedin: https://eg.linkedin.com/in/ahmedbeheiry
/********** Thanks for being here **********/
body {background: #f2f2f2;}
h1 {
position: relative;
text-align: center;
color: #353535;
font-size: 50px;
font-family: 'Cormorant Garamond', serif;
}
h1:before {
position: absolute;
content: '';
bottom: -20px;
width: 150px;
height: 2px;
background: #e74c3c;
}
p {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
text-align: center;
color: #676767;
}
.buttons-coll {
width: 90%;
margin: 50px auto;
text-align: center;
}
button {
margin: 20px;
}
.custom-btn {
padding: 10px 25px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
background: transparent;
outline: none !important;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
/**** BTN No. 1 ****/
.btn-1 {border: 2px solid #000;}
.btn-1:hover {
background: #000;
color: #fff;
}
.btn-1:active {top: 2px;}
/**** BTN No. 2 ****/
.btn-2 {
border: none;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
.btn-2:before, .btn-2:after {
position: absolute;
content: "";
right: 0;
top: 0;
background: #000;
transition: all 0.3s ease;
}
.btn-2:before {
height: 0%;
width: 2px;
}
.btn-2:after {
width: 0%;
height: 2px;
}
.btn-2:hover:before {height: 100%;}
.btn-2:hover:after {width: 100%;}
/**** BTN No. 3 ****/
.btn-3 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-3 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-3:before, .btn-3:after {
position: absolute;
content: "";
right: 0;
top: 0;
background: #000;
transition: all 0.3s ease;
}
.btn-3:before {
height: 0%;
width: 2px;
}
.btn-3:after {
width: 0%;
height: 2px;
}
.btn-3:hover:before {height: 100%;}
.btn-3:hover:after {width: 100%;}
.btn-3 span:before, .btn-3 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
background: #000;
transition: all 0.3s ease;
}
.btn-3 span:before {
width: 2px;
height: 0%;
}
.btn-3 span:after {
width: 0%;
height: 2px;
}
.btn-3 span:hover:before {height: 100%;}
.btn-3 span:hover:after {width: 100%;}
/**** BTN No. 4 ****/
.btn-4 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-4 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-4:before, .btn-4:after {
position: absolute;
content: "";
right: 0;
top: 0;
background: #000;
transition: all 0.3s ease;
}
.btn-4:before {
height: 50%;
width: 2px;
}
.btn-4:after {
width: 20%;
height: 2px;
}
.btn-4:hover:before {height: 100%;}
.btn-4:hover:after {width: 100%;}
.btn-4 span:before, .btn-4 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
background: #000;
transition: all 0.3s ease;
}
.btn-4 span:before {
width: 2px;
height: 50%;
}
.btn-4 span:after {
width: 20%;
height: 2px;
}
.btn-4 span:hover:before {height: 100%;}
.btn-4 span:hover:after {width: 100%;}
/**** BTN No. 5 ****/
.btn-5 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-5 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-5:before, .btn-5:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: #000;
transition: all 0.3s ease;
}
.btn-5:before {
height: 50%;
width: 2px;
}
.btn-5:after {
width: 20%;
height: 2px;
}
.btn-5:hover:before {height: 100%;}
.btn-5:hover:after {width: 100%;}
.btn-5 span:before, .btn-5 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #000;
transition: all 0.3s ease;
}
.btn-5 span:before {
width: 2px;
height: 50%;
}
.btn-5 span:after {
width: 20%;
height: 2px;
}
.btn-5 span:hover:before {height: 100%;}
.btn-5 span:hover:after {width: 100%;}
/**** BTN No. 6 ****/
.btn-6 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-6 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-6:before, .btn-6:after {
position: absolute;
content: "";
height: 0%;
width: 2px;
background: #000;
}
.btn-6:before {
right: 0;
top: 0;
transition: all 0.1s ease;
}
.btn-6:after {
left: 0;
bottom: 0;
transition: all 0.1s 0.2s ease;
}
.btn-6:hover:before {
transition: all 0.1s 0.2s ease;
height: 100%;
}
.btn-6:hover:after {
transition: all 0.1s ease;
height: 100%;
}
.btn-6 span:before, .btn-6 span:after {
position: absolute;
content: "";
background: #000;
}
.btn-6 span:before {
left: 0;
top: 0;
width: 0%;
height: 2px;
transition: all 0.1s 0.1s ease;
}
.btn-6 span:after {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
}
.btn-6 span:hover:before {width: 100%;}
/**** BTN No. 7 ****/
.btn-7 {
border: 2px solid #000;
transition: all 0.3s ease;
background: #f2f2f2;
}
.btn-7:before {
position: absolute;
content: ' ';
z-index: -1;
width: 25%;
top: 50%;
left: -15%;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
.btn-7:hover {
background: #000;
color: #fff;
border-color: #000;
padding-left: 30px;
padding-right: 20px;
}
.btn-7:hover:before {left: -10%;}
/**** BTN No. 8 ****/
.btn-8 {
padding-left: 30px;
padding-right: 20px;
background: #f2f2f2;
border: 2px solid #000;
transition: all 0.3s ease;
}
.btn-8:before {
position: absolute;
content: ' ';
z-index: -1;
width: 25%;
top: 50%;
left: -10%;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
.btn-8:hover {
background: #000;
color: #fff;
border-color: transparent;
padding-left: 25px;
padding-right: 25px;
}
.btn-8:hover:before {left: -15%;}
/**** BTN No. 9 ****/
.btn-9 {
background: #f2f2f2;
border: 2px solid #000;
transition: all 0.3s ease;
}
.btn-9:before, .btn-9:after {
position: absolute;
content: ' ';
z-index: -1;
width: 25%;
top: 50%;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
.btn-9:before {left: -10%;}
.btn-9:after {right: -10%}
.btn-9:hover {
background: #000;
color: #fff;
}
.btn-9:hover:before {left: -15%;}
.btn-9:hover:after {right: -15%;}
/**** BTN No. 10 ****/
.btn-10 {
background: #f2f2f2;
border: 2px solid #000;
transition: all 0.3s ease;
}
.btn-10:before, .btn-10:after {
position: absolute;
content: ' ';
z-index: -1;
width: 25%;
top: 50%;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
.btn-10:before {left: -15%;}
.btn-10:after {right: -15%}
.btn-10:hover {
background: #000;
color: #fff;
}
.btn-10:hover:before {left: -10%;}
.btn-10:hover:after {right: -10%;}
/**** BTN No. 11 ****/
.btn-11 {
background: #f2f2f2;
border: 2px solid #000;
transition: all 0.3s ease;
}
.btn-11:before, .btn-11:after {
position: absolute;
content: ' ';
z-index: -1;
width: 25%;
top: 50%;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
.btn-11:before {left: -10%;}
.btn-11:after {right: -10%}
.btn-11:hover {
background: #000;
color: #fff;
}
.btn-11:hover:before {left: 0%;}
.btn-11:hover:after {right: 0%;}
/**** BTN No. 12 ****/
.btn-12 {
border: 2px solid #000;
z-index: 1;
}
.btn-12:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #000;
transition: all 0.3s ease;
}
.btn-12:hover {
color: #fff;
}
.btn-12:hover:after {
top: 0;
height: 100%;
}
.btn-12:active {top: 2px;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.