Once in week I spend two hours to developing a idea

Bootstrap 3.2.
Default behaviour of buttons on hover - stay darker. Let's made it transparent to on photos on background they looks great. As designer want.

.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-transition: background-color .5s;
-moz-transition: background-color .5s;
-ms-transition: background-color .5s;
-o-transition: background-color .5s;
transition: background-color .5s;
}

.btn:hover,
.btn:focus
{
color: #333333;
text-decoration: none;
}

.btn:active,
.btn.active
{
outline: 0;
background-image: none;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn
{
cursor: not-allowed;
pointer-events: none;
}

.btn-default {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default
{
color: #333333;
background-color: #e6e6e6;
border-color: #adadad;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default
{
background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active
{
background-color: #ffffff;
border-color: #cccccc;
}

.btn-default .badge {
color: #ffffff;
background-color: #333333;
}

.btn-primary {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary
{
color: #ffffff;
background-color: #3071a9;
border-color: #285e8e;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary
{
background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active
{
background-color: #428bca;
border-color: #357ebd;
}

.btn-primary .badge {
color: #428bca;
background-color: #ffffff;
}

.btn-success {
color: #ffffff;
background-color: #5cb85c;
border-color: #4cae4c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success
{
color: #ffffff;
background-color: #449d44;
border-color: #398439;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success
{
background-image: none;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active
{
background-color: #5cb85c;
border-color: #4cae4c;
}

.btn-success .badge {
color: #5cb85c;
background-color: #ffffff;
}

.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #46b8da;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info
{
color: #ffffff;
background-color: #31b0d5;
border-color: #269abc;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info
{
background-image: none;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active
{
background-color: #5bc0de;
border-color: #46b8da;
}

.btn-info .badge {
color: #5bc0de;
background-color: #ffffff;
}

.btn-warning {
color: #ffffff;
background-color: #f0ad4e;
border-color: #eea236;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning
{
color: #ffffff;
background-color: #ec971f;
border-color: #d58512;
}

.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning
{
background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active
{
background-color: #f0ad4e;
border-color: #eea236;
}

.btn-warning .badge {
color: #f0ad4e;
background-color: #ffffff;
}

.btn-danger {
color: #ffffff;
background-color: #d9534f;
border-color: #d43f3a;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger
{
color: #ffffff;
background-color: #c9302c;
border-color: #ac2925;
}

.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger
{
background-image: none;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active
{
background-color: #d9534f;
border-color: #d43f3a;
}

.btn-danger .badge {
color: #d9534f;
background-color: #ffffff;
}

.btn-outline {
background-color: transparent;
}

.btn-primary.btn-outline {
color: #428bca;
}

.btn-primary.btn-outline:hover {
background-color: #428bca;
border-color: #357ebd;
}

.btn-success.btn-outline {
color: #5cb85c;
}

.btn-success.btn-outline:hover {
background-color: #5cb85c;
border-color: #4cae4c;
}

.btn-info.btn-outline {
color: #5bc0de;
}

.btn-info.btn-outline:hover {
background-color: #5bc0de;
border-color: #46b8da;
}

.btn-warning.btn-outline {
color: #f0ad4e;
}

.btn-warning.btn-outline:hover {
background-color: #f0ad4e;
border-color: #eea236;
}

.btn-danger.btn-outline {
color: #d9534f;
}

.btn-danger.btn-outline:hover {
background-color: #d9534f;
border-color: #d43f3a;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover
{
color: #fff;
}

.btn-outline-inverse {
background-color: transparent;
border-color: #fff;
color: #fff;
}

.btn-outline-inverse:hover {
background-color: #fff;
}

.btn-primary.btn-outline-inverse:hover {
color: #428bca;
}

.btn-success.btn-outline-inverse:hover {
color: #5cb85c;
}

.btn-info.btn-outline-inverse:hover {
color: #5bc0de;
}

.btn-warning.btn-outline-inverse:hover {
color: #f0ad4e;
}

.btn-danger.btn-outline-inverse:hover {
color: #d9534f;
}

p {
margin: 0;
}

.pane {
padding: 20px;
}

.pane.outline {
background-color: #fff;
}

.pane.outline-inverse {
color: #fff;
background-color: #00f;
}

Standard bootstrap 3.2 buttons

Button outline style

Button outline style on inverse background

For comparison