HTML & CSS / Buttons / Mouseover Color
Button mouseover color change
-
Example 1
1. html
2. css
.gallery .nav-tabs { border: none; text-align: right; padding: 0; } .gallery .nav-tabs > li { float: none; margin: 0 0 3px 0; padding: 0; display: inline-block; } .gallery .nav-tabs > li > a { font-size: 12px; text-decoration:none; font-weight: 500; letter-spacing: 1px; color: #fff; margin: 0; line-height: 24px; border: 0px solid #5aa306; background: #dcdcdc; padding: 7px 20px; text-transform: uppercase; border-radius: 0; display: inline-block; z-index: 9; -webkit-transition: .4s; -moz-transition: .4s; -o-transition: .4s; transition: .4s; } .gallery .nav-tabs > li > a br { display: none; } .gallery .nav > li > a:focus:before, .gallery .nav > li > a:hover:before { width: 100%; } .gallery .nav-tabs > li.active > a:before { width: 100%; } .gallery .nav > li > a:focus, .gallery .nav > li > a:hover { background-color: red; border-color: #ff8e00; color: #fff; } -
Example 2
1. HTML
Read More 2. CSS
.slidebtn { width: 140px; font-size: 15px; text-align: center; font-weight: 600; line-height: 42px; margin: 0; letter-spacing: .4px; padding: 0; border-radius: 25px; display: block; background: #fff; color: #fe5b94; -webkit-transition: .4s; -moz-transition: .4s; -o-transition: .4s; transition: .4s; -webkit-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2); visibility: visible !important; -webkit-animation-name: slideInRight !important; -moz-animation-name: slideInRight !important; -o-animation-name: slideInRight !important; animation-name: slideInRight !important; } .slidebtn:hover, .slidebtn:focus { background: #fe5b94; color: #ffffff; }