Как убрать border у button при нажатии на эту кнопку (bootstrap)?

Question

[sunnyrio]

Как убрать border у button, появляется при нажатии на эту кнопку (bootstrap)?

Синего цвета этот border ниже изображение:

<button type="button" class="btn btn-primary block-1_offer_feedback-form__button--modal">
        Оформить заявку
</button>

.block-1_offer_feedback-form__button--modal {
	outline:none;
	width: 256px;/*100%*/
	height: 72px;
	line-height: 72px;
	padding: 0px;
	margin: 45px 0px 0px 0px;
	border: none;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	background: #f86486;
	background: -moz-linear-gradient(top, #f86486 0%, #f13d68 100%);
	background: -webkit-linear-gradient(top, #f86486 0%, #f13d68 100%);
	background: linear-gradient(to bottom, #f86486 0%, #f13d68 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86486', endColorstr='#f13d68', GradientType=0);
	-webkit-box-shadow: 0 15px 20px rgba(208, 0, 49, 0.25);
	-moz-box-shadow: 0 15px 20px rgba(208, 0, 49, 0.25);
	box-shadow: 0 15px 20px rgba(208, 0, 49, 0.25);
	-webkit-border-radius: 36px;
	-moz-border-radius: 36px;
	border-radius: 36px;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

Comments

[origami1024]

Угадай мелодию продолжается. Погружаемся глубже в кроличью нору.
Теперь тебе нужно найти стили применяемые к кнопке по нажатию, возможно к ней добавляется отдельный класс, возможно это сделано просто в js, возможно это повешено на

.block-1_offer_feedback-form__button--modal:active {}

.

[sunnyrio]

origami1024,

.block-1_offer_feedback-form__button:active {
	border-color: transparent;
	outline: none;
}

[origami1024]

sunnyrio, опиши точно, у тебя этот бордер появляется при нажатии на кнопку? Тоесть если не нажимать, то этого бордера нет, а если нажать, то он появляется? я правильно понимаю?

[sunnyrio]

origami1024, sunnyrio.ru/kinder можешь зайти посмотреть

[sunnyrio]

origami1024, он как-то странно у бутстрапа работает

[origami1024]

sunnyrio, изменил ответ, должно работать

[sunnyrio]

origami1024, заработало, только из-за !important , почему так?

[origami1024]

sunnyrio, некоторые стили бутстрапа важнее, чем то что ты задаешь. Может можно подобрать селектор, чтобы перекрыть бутстраповский без !important если повозиться с этим

[origami1024]

ОП, у тебя какая версия бутстрап? На новых версиях для решения нужно всего лишь добавить кнопке класс shadow-none

[sunnyrio]

origami1024, bootstrap 4

[origami1024]

sunnyrio, попробуй

Answer 1

[origami1024]

1. Смотря какая версия bootstrap. В новых можно убрать средствами bootstrap, добавив к кнопке класс shadow-none

2. Вариант через css

.btn:focus, .btn:active {
  box-shadow: none !important;
}

Владислав Лысков прав, только нужно еще !important
https://jsfiddle.net/jhd0pcru/

Comments

[sunnyrio]

Не помогает

[origami1024]

Pardon Me! Where Do I Find 4giveness?, outline может быть округлым?

[sunnyrio]

Pardon Me! Where Do I Find 4giveness?,

.block-1_offer_feedback-form__button:active {
	border-color: transparent;
	outline: none;
}

не помогает

[origami1024]

sunnyrio, попробуй с Important

[origami1024]

https://jsfiddle.net/ptqsvwez/
Вот фидла для тестов

[Rustam Bainazarov]

sunnyrio, ваш код я почему-то не вижу...

[Владислав Лысков]

это box-shadow