Hover tab

Can you post the markup and CSS for this element?

I could be more specific if you had some code to display, but in general if you only want to change the style for that one element, you can add a no border style to it. An example is below.

<button style="border:none;">Share</button>

Select allOpen in new window

the problem is i did inspect to see the css but im not getting any css just basic bootstrap

Try adding that style example above to the HTML element.

If you want to also remove the shadow effect you will have to edit the CSS file.
It's not to seems Bootstrap default button...
https://getbootstrap.com/docs/3.3/css/#buttons-options

To find out using Chrome rigth click on the button - Inspect
Check Style tab (at the right) it will display which is the CSS file and line of code for this button.

If this is Bootstrap CSS don't edit the original CSS just create a new file custom.css and add custom button class
and change the btn- class for btn-custom in your page

.btn-custom {
  background-color: #ccc;
  color: #000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.hover {
  background-color: #ccc;
  color: #000;
}

@E-Dub
 the solution isnt working

Can you post the HTML code you have?

its pretty long

i found a way which is to remove the border and background but its not working because im not sure my css order is correct

.social>a:hover{
	  background-color: none !important;
  border-color: none !important;
}

Select allOpen in new window

			  <ul class="nav nav-tabs" style="background-color:#FAFAFA;font-family:Old Standard TT;font-size:20px">
			    <li class="active"><a data-toggle="tab" href="#details<?=$meal_option_id?>">Details</a></li>
			    <li><a data-toggle="tab" href="#ingredients<?=$meal_option_id?>">Ingredients</a></li>
			    <li><a data-toggle="tab" href="#nutrition<?=$meal_option_id?>">Nutrition</a></li>
			    <li><a data-toggle="tab" href="#instructions<?=$meal_option_id?>">Instructions</a></li>
			    <li class="social" style="float:right;margin-left:-50px"> <a><img src= "../assets/images/gmail.png" height="35px"></a>
			    <li class="social" style="float:right;margin-left:-50px"> <a><img src= "../assets/images/facebook.png" height="35px"></a>
			    <li class="social" style="float:right;margin-left:-50px"> <a><img src= "../assets/images/twitter.png" height="35px"></a>
			    <li class="social" style="float:right;margin-top:8px;"> <a><p class="text-black" style="font-size:11px;font-family:Open Sans">SHARE</p></a>
			  </ul>

Select allOpen in new window

I just want the ones with the class ="social" not all of them

Just post the code for that one share button section

ok i posted it above