0

I am just having two problems with call to action button that appears on mobile version of website. Firstly, the blue border appers around the button. First time I am seeing this blue border on click on my button. Is it possible to remove it?

Secondly, button unhovers after closing modal. I just need to click outside of button to unhover it.

Here is the page http://novostroyka.shahar.uz/complex/citylife

<a href="#" onclick="return false;" class="float2" data-toggle="modal" data-target="#myModal"> 
    <i class="fa fa-phone my-float2" style="font-size:25px;"></i> 
</a>  

@media (min-width:800px) {
.float2{
visibility:hidden;
}
}

@media (max-width:768px) {
.float2{
    position:fixed;
    width:60px;
    height:60px;
    bottom:100px;
    right:27px;
    background-color:#24ac36;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    animation: bot-to-top 2s ease-out;
    z-index:1000;
}

.my-float2{ 
    font-size:24px;
    margin-top:18px;
}

.ul2{
    position:fixed;
    right:30px;
    padding-bottom:20px;    
    bottom:65px;
    z-index:100; 
}

.ul2 .li2{
    list-style:none;
    margin-bottom:10px;
}

.ul2 .li2 .a2{
    background-color:#24ac36;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    width:60px;
    height:60px;
    display:block;
}

.ul2:hover{
    visibility:visible!important;
    opacity:1!important;
}

.modal-body2{
    position: relative;
    padding: 20px;
}
Natlus
  • 57
  • 7

1 Answers1

0

The 'blue outline' may be to highlight that a button is focused or active. To remove it, use the following snippet:

button,
button:active,
button:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

You can replace button with any relevant HTML element, such as a, a:active, a:focus { ... } etc for links.

This will hide any :focus outline (outline: none), and hide the :active 'tap highlight' on smartphones (-webkit-tap-highlight-color: transparent;) meaning your button should no longer show a blue outline on either desktops or smartphones.

I am not quite sure what you mean by your second question?

Oliver
  • 2,930
  • 1
  • 20
  • 24
  • Hi, provided code worked out for removing blue border. Second question is about disabling hover of the button. Click on button opens modal. After you close modal, button still stays with active hover, and only click outside of button turns off hover. – Natlus Sep 04 '19 at 04:19
  • I believe you are referring to the 'persistent hover' issue on (mainly) iPhones. The best way to get around this is to remove and immediately re-add the link in question using JavaScript - see https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices – Oliver Sep 04 '19 at 08:15