CODEWITHSUNDEEP
html
rashmi
rashmi

Reputation: 619

changing button tag border color

I have put an image in border-less button tag. When the button is selected with Tab, a brown border appears around the image. How do I change color of that rectangle from brown to white. Is is possible to have a white rectangle with inner and outer shadow of blue.

HTML

<td align=center valign=middle>
  <figure>
    <button style="background-color:black; height:160px;width:160px ; border:none">
        <img src="F:\rashmi\icons_tv\Help_Normal.png">
    </button>
    <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font>

    </figcaption>
  </figure>
</td>

EDIT:

I can change highlight color by using style=outline-color:white

HTML

<html>

    <body>
        <tr>
            <td align=center valign=middle>
                <figure>
                    <button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;">
                        <img src="F:\rashmi\icons_tv\Help_Normal.png">
                    </button>
                    <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font>

                    </figcaption>
                </figure>
            </td>
            <td align=center valign=middle>
                <figure>
                    <button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;">
                        <img src="F:\rashmi\icons_tv\Help_Normal.png">
                    </button>
                    <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font>

                    </figcaption>
                </figure>
            </td>
        </tr>
    </body>

</html>

Here is my initial page load image and if I press Tab I get a highlight similar to what is shown

How do I increase the rectangle width.

Upvotes: 2

Views: 37701

Answers (2)

adweb24.com
adweb24.com

Reputation: 1

enter image description here

[custom_button text="Custom Button" title="Custom Button" url="http://www.your_link_goes_here..." size="medium" bg_color="#FF5C00" text_color="#FFFFFF" align="left" target="_self"]

Upvotes: -1

Sandy
Sandy

Reputation: 6353

<input type="button"

    value="Button with border"

    style="color: #07c;

        border: 2px solid #07c;

        padding: 2px 5px;" />

Visit this link for more details.

Upvotes: 2

Related Questions