25 CSS Buttons With Hover Effects
A collection of 15 CSS buttons that will enhance your website. They include nice interactive transitions and hover effects that will surely grab the attention of your visitors. To see the CSS for a button, just click on the "Show me the code" button.
Static Button
This is a static button that can be used to highlight plain text or added to a link. It uses the class "button".
more
<![CDATA[
<div class="button">more</div>
<style>
.button {
background-color: #b2dd4c;
border: 0 none;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 1em;
font-weight: bold;
margin: 0 3px;
padding: 8px 14px;
cursor: pointer;
}
.button:hover {
background-color: #83a339;
border: 0 none;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 1em;
font-weight: bold;
margin: 0 3px;
padding: 8px 14px;
cursor: pointer;
}
</style>
]]>
Hover with Arrow Button
This Button slides out to the right to reveal an arrow while a darker color shade slides downward.
more
<![CDATA[
<a class="animated-button">more</a>
<style>
a.animated-button {
color: #FFF;
background: #b2dd4c;
padding: 8px 14px;
margin: 0 3px;
font-weight: bold;
letter-spacing: 1px;
border-radius: 3px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #83a339;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
a.animated-button:hover {
box-shadow: inset 0 100px 0 0 #83a339;
}
a.animated-button:hover:after {
content: "\f061";
font-family: FontAwesome;
padding-left: 15px;
}
a.animated-button:hover:before, a.animated-button:hover:after {
box-shadow: inset 0 0 0 0 #83a339;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
</style>
]]>
Inset Button
This button has a nice click effect. Click it to see it in action. You can read more about how it was created by visiting https://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/#
<![CDATA[
<a class="insetButton">Continue</a>
<style>
.insetButton {
background-color:#3bb3e0;
padding:10px;
position:relative;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.insetButton::before {
background-color:#eaeef3;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding:8px;
left:-8px;
top:-8px;
z-index:-1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
.insetButton:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
}
</style>
]]>
Round CSS Buttons With Text Flyout
Round buttons with hover and text reveal by https://codepen.io/sethabbott/pen/FtuLz.
To use this button, add the following code to your page:
<![CDATA[
<ul>
<li><a href="#" class="round green">Login<span class="round">Welcome Back!</span></a></li>
<li><a href="#" class="round red">Sign Up<span class="round">Join Now!</span></a></li>
<li><a href="#" class="round yellow">Demo<span class="round">Try It!</span></a></li>
</ul>
<style>
ul {
margin: 30px auto;
text-align: center;
}
li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
vertical-align: middle;
line-height: 3.8;
margin: 10px;
}
@-moz-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 0;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 300px;
z-index: 1;
border-width: 4px;
border-style: solid;
line-height: 90px;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 33px;
padding-top: 0;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 10px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
a.red {
background-color: rgba(239,57,50,1);
color: rgba(133,32,28,1);
border-color: rgba(133,32,28,.2);
}
a.red:hover {
color: rgba(239,57,50,1);
}
a.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
a.green:hover {
color: rgba(1,151,171,1);
}
a.yellow {
background-color: rgba(252,227,1,1);
color: rgba(153,38,0,1);
border-color: rgba(153,38,0,.2);
}
a.yellow:hover {
color: rgba(252,227,1,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
color: #fff;
}
.round span:hover {
opacity: .95;
font-size: 1.3em;
line-height: 4;
-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}
.red span {
background: rgba(133,32,28,.7);
}
.yellow span {
background: rgba(161,145,0,.7);
}
</style>
]]>
CSS3 Buttons With Hover Transitions
These button show a variety of hover transition effects. You can get the CSS by visiting https://codepen.io/tutsplus/pen/PqZRxd?limit=all&page=3&q=css3+button
Slide Right
Slide Left
Slide Down
Slide Up
Grow Box
Grow Ellipse
Grow Skew →
Grow Skew ←
Grow Spin
Sticky Side Column
If you're using our
PHP Website Template , this is the optional side bar column you can add to some or all of your pages. It can be useful for adding advertisements such as Adsense ads to be displayed on multiple pages.
When you include the side column, your main content will automatically adjust its width to accommodate it.
The side bar is 'sticky'; it will scroll down and remain in view.
You can turn on/off the side bar column per page by defining the $showSide option located at the top of each file.