How to style the value atrribute in the input tag?

Question

My input type is a button and I want to customize the style of the value attribute and want to move it a little to the left. Also there are other input buttons as well. I want to apply the style only to this input button. Here is the code:

<input  style="width:85px;margin-left:-5px" type="button" value="Discuss" 
 onclick="location.href=''" name="sub" class="button-add  mebutton">

Answer 1

I think you want transition on hover of a button then you can use this link to get an idea of how to do that.

CSS3 - animate text align left/center/right

check the answer of @Bart you can do something like that.

for other animation and effects of button check this

Answer 2

<input type="button" value="Discuss" 
 onclick="location.href=''" name="sub" class="button-add  mebutton">   

add this in css

<style>
        input[type=button]
                         {
                            margin-left:10px;
                            width:85px;
                          }
    </style>

Answer 3

Remove the inline styles and apply the styles from the class you have added mebutton . If you think the mebutton class added all the places, then add some new class for this button and apply it. Use text-align property to align your text left/right and use the padding for the position of the text.

.mebutton {
   width:85px;
   text-align:left;
   padding-left:10px;
}

Same I have added in the following snippet.

 .mebutton { width:85px; text-align:left; padding-left:10px; } 

 <input type="button" value="Discuss" onclick="location.href=''" name="sub" class="button-add mebutton"> 

Answer 4

<input class="btnstyle" type="button" value="Discuss" onclick="location.href=''" name="sub">

add this css

<style>

.btnstyle { color: blue; font-size : 24px;}