Как изменить цвет btn-default в css

Я не могу изменить цвет кнопки. Класс «btn-default». Я вижу только половину цвета кнопки, когда наводил на нее мышь. Вот мой HTML код:Как изменить цвет btn-default в css

<div class="pageOne"> 
     <div class="block text-center"> 
      <h1 id="header_text1"> a Good Tree production </h1> 
      <h2 id="header_text2">We Review What We Watch</h2> 
     </div> 
    <div class="btnList"> 
     <a class="btn btn-default" href = "#"> a Good Tree production</a> 
     <a class="btn btn-default" href = "#"> About Us</a> 
     <a class="btn btn-default" href = "#"> Contact Us</a> 
     <a class="btn btn-default" href = "#"> Works</a> 
    </div> 
</div>

CSS:

#header_text2{ 
font-family: 'Jura', sans-serif; 
color: white; 
font-weight: 400; 
} 

.btn-default{ 
    background-color: black !important; 
    color: #0D9E69; 
    font-family: 'Barrio', cursive; 
    border-radius: 0px; 
    font-size: 20px !important; 
} 

.pageOne{ 
background-image:url("./container2.jpg"); 
background-size:cover; 
height:450px; 
}

Вот моя живая связь Выход:

https://jsfiddle.net/VijayVj7/6k8y8ehL/1/

Пожалуйста, может кто-нибудь помочь мне в этом

источник

2017-02-09 Vijay Vj

Bootstrap использует фоновое изображение на '.btn-default', поэтому вам также необходимо переопределить это. – Gerrit0

просто добавьте

.btn-default:hover { 
    background: #333; 
}

источник

2017-02-09 17:07:55 YonatanAr

Вы можете изменить положение фона для:

.btn-default:focus, .btn-default:hover { 
    background-color: #e0e0e0; 
    background-position: 0 -50px; 
}

Или

.btn-default:focus, .btn-default:hover { 
    background: #e0e0e0; 
}

источник

2017-02-09 17:12:14 iamrobert

Просто добавьте эту строку в существующий CSS background-image: none !important;

Проверьте это работает фрагмент кода -

.btn-default{ 
 
     background-color: black !important; 
 
     color: #0D9E69; 
 
     font-family: 'Barrio', cursive; 
 
     border-radius: 0px; 
 
     font-size: 20px !important; 
 
     background-image: none !important; 
 
    }

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      
 
      </head> 
 
      <body> 
 
<div class="pageOne"> 
 
     <div class="block text-center"> 
 
      <h1 id="header_text1"> a Good Tree production </h1> 
 
      <h2 id="header_text2">We Review What We Watch</h2> 
 
     </div> 
 
    <div class="btnList"> 
 
     <a class="btn btn-default" href = "#"> a Good Tree production</a> 
 
     <a class="btn btn-default" href = "#"> About Us</a> 
 
     <a class="btn btn-default" href = "#"> Contact Us</a> 
 
     <a class="btn btn-default" href = "#"> Works</a> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

TRY Это должно work--

.btn-default{ 
    background-color: black !important; 
    color: #0D9E69; 
    font-family: 'Barrio', cursive; 
    border-radius: 0px; 
    font-size: 20px !important; 
    background-image: none !important; 
}

источник

2017-02-09 17:13:09 neophyte

Единственное, что вам нужно сделать, это:

background-image: none;

источник

2017-02-09 17:43:05

Решение вашей проблемы является добавление background-image:none !important; внутри btn-default в вашем css, чтобы он выглядел следующим образом:

.btn-default{ 
    background-color: black !important; 
    color: #0D9E69; 
    font-family: 'Barrio', cursive; 
    border-radius: 0px; 
    font-size: 20px !important; 
    background-image: none !important; 
}

Теперь проблема изменения btn-default заключается в том, что он удалит цель дизайна btn-default. Я предлагаю вам добавить свой собственный класс с черным цветом фона и использовать его вместо btn-default, чтобы избежать общих изменений в boostrap. например, в коде, измените БТН-умолчанию для моего-БТН-умолчанию из вашего HTML кода, а также в код CSS, так что код будет выглядеть следующим образом

.my-btn-default{ 
    background-color: black !important; 
    color: #0D9E69; 
    font-family: 'Barrio', cursive; 
    border-radius: 0px; 
    font-size: 20px !important; 
    background-image:none !important; 
}

и в HTML

<div class="btnList"> 
    <a class="btn my-btn-default" href = "#"> a Good Tree production</a> 
    <a class="btn my-btn-default" href = "#"> About Us</a> 
    <a class="btn my-btn-default" href = "#"> Contact Us</a> 
    <a class="btn my-btn-default" href = "#"> Works</a> 
    </div>

таким образом, он не сломается с бутстрапа.

источник

2017-02-09 18:19:00 bxorcloud

Как изменить цвет btn-default в css

ответ

Смежные вопросы