CSS: синхронизация границы с закругленной кнопкой обрезания

Question

Мой код до сих пор позволяет мне щелкнуть по кнопке с закругленными краями, поскольку я применил функцию радиуса радиуса. Тем не менее, когда я нажимаю на кнопку, буровщик по-прежнему стоит в квадрате и поэтому выглядит ужасно не синхронизированным.

Можно увидеть здесь:

http://www.tiikoni.com/tis/view/image.php?id=23d3264

это CSS для кнопки:

.submitToDoButton { 
    background: lightgray; 
    font-size: 20px; 
    color: red; 
    padding: 2px; 
    width: 100px; 
    border-radius: 25px; 
} 

это то, что я думал, будет код, чтобы изменить границы ака установить его тот же самый радиус:

.submitToDoButton:active{ 
    border-radius: 25px; 
} 

но это ничего не делает

Answer 1

Вы можете попробовать outline: none; основному классу кнопки:

.submitToDoButton{ 
    border-radius: 25px; 
    outline: none; /* add this */ 
} 

Если вы хотите получить эффект, схожий очертить, но хорошо выглядеть, вы можете использовать box-shadow свойство.

Answer 2

Вы не сможете решить эту проблему с помощью радиуса и контура границы. Чтобы получить результат, который вы ищете, вам нужно сделать тень, выглядящую так же, как на схеме: фокус.

.submitToDobutton:focus { 
    box-shadow: 0 0 5px blue; 
} 

Я не уверен насчет цвета контура, но вы, вероятно, придется изменить «синий» для правильного цвета.