Как убрать эффект наведения с кнопки Bootstrap? - PullRequest
Новая
       5

Как убрать эффект наведения с кнопки Bootstrap?

0 голосов
/ 29 мая 2018

У меня есть кнопка Bootstrap, в которой я переопределил стили в моей таблице стилей, потому что я хотел сделать кнопку темной, теперь кнопка имеет эффект наведения от Bootstrap, как я могу от нее избавиться?См. Фрагмент ниже для результата: 

.btn-dark {
  min-width: 100px;
  background-color: black;
  color: white;
  border-radius: 1px;
  text-decoration: none;	
  opacity:1.0;
  box-shadow:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>

Ответы [ 4 ]

0 голосов
/ 29 мая 2018 
<!DOCTYPE html>
<html lang="en">


<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .btn-dark{
    min-width: 100px;
    background-color: black;
    color: white;
    border-radius: 1px;
    text-decoration: none;  

}

.btn:hover {
color: #fff !important;
text-decoration: none;
}
    </style>

</head>

<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>
</body>

</html>

скрипка: https://jsfiddle.net/1qmjw47o/

0 голосов
/ 29 мая 2018

Вам также нужно переопределить наведение в стилизации. 

.btn-dark: hover {
    //Your style
}
0 голосов
/ 29 мая 2018

Просто используйте 

    .btn:hover {
}

и напишите необходимое. 

.btn-dark{
	min-width: 100px;
	background-color: black;
	color: white;
	border-radius: 1px;
	text-decoration: none;	
	opacity:1.0;
	box-shadow:none;
}
.btn-dark:hover {
color: #fff !important;
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>
0 голосов
/ 29 мая 2018

Попробуйте использовать селектор: hover и добавьте больше CSS, чтобы указать точный заданный переход. 

.btn-dark:hover {
  color: white;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...