CODEWITHSUNDEEP
htmlcss
bregalad
bregalad

Reputation: 23

How to put a border around the text in a button?

I would like to have a coloured border around the text of a button.

My button is like this:

<input id="btnexit" class="exitbutton" type="button" value="Exit" name="btnExit"></input>

I already add in CSS the style of the border of the button, but I need to add also a coloured border around the text Exit.

Is it possible to do that in CSS? How could I do otherwise?

Upvotes: 2

Views: 5891

Answers (3)

Devang Rathod
Devang Rathod

Reputation: 6736

try this :

<button type="button">
     <span style="border:1px solid #FF0000;">Button</span>
</button>

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

LIke this

demo

 .exitbutton {

padding:10px;
background-color:white;
  cursor:pointer;
}
input{
    border:1px solid blue;
}

Upvotes: 0

Razz
Razz

Reputation: 4005

You can put a span inside the button, that way you have two elements to style.

html:

<button>
    <span>click me!</span>
</button>

and the css:

button{
    border: 1px solid #ccc;
    background: #eee;
    padding: 5px 10px;
}
button span{
    border: 1px solid red;
}

Example!

Upvotes: 4

Related Questions