CODEWITHSUNDEEP
htmlcssbutton
Tavria_forever
Tavria_forever

Reputation: 21

Moving the text inside the button

There is a button. Inside the button text. How to move the text when you click on an 1 px down, not moving with the button itself, only the text inside?

<span class="button-wrapper">
      <a href="#" class="button">
           button text
      </a>
</span>

1.button-wrapper - Serves as the gradient border 2.element have 1px margin + background-gradient

If I have orders from the top padding, clicking, button increases in size, but I just need to move text within a tag and, without moving a button, how?

Upvotes: 2

Views: 19619

Answers (3)

WoodrowShigeru
WoodrowShigeru

Reputation: 1595

I had a similar problem and fixed it as follows, though I don't particularly understand why the float is necessary. Any comments on that would be greatly appreciated.

I'm using padding to make the text move, by adding 1px top + left and subtracting 1px right + bottom. But for some reason that I don't understand, this alone pushes the sibling boxes down 1px. We don't want the buttons themselves to move, though.

HTML: 

<p>
  <span class="button">third</span>
  <span class="button">fourth</span>
</p>

<p>
  <input type="button" class="button button2" value="fifth" />
  <input type="button" class="button button2" value="sixth" />
</p>

CSS:

.button {
  outline: none;
  background-color: blanchedalmond;
  border: 1px solid maroon;
  padding: 3px 10px 4px 10px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  line-height: 20px;
  margin: 0;
}

span.button {
  display: inline-block;
  text-indent: -9999px;
  width: 20px;
  height: 20px;  
}

p {
  background-color: magenta;
  overflow: auto;
}

.button2 {
  float: left;
  margin-right: 4px;
}

.button:active {
  background-color: red;
  border: 1px solid brown;
  padding: 4px 9px 3px 11px;
  margin-top: 0px;
}

Fiddle where "fifth" and "sixth" behave like we want them to because we added float.

Upvotes: 0

Timotheos
Timotheos

Reputation: 405

Or, alternatively, for the text in a single input button element

<input id="submit" type="submit" value="Submit" />

this CSS may be useful:

#submit
{
    padding-top: 4px;
}
#submit:active
{
    padding-top: 6px;
}

Upvotes: 1

Kyle
Kyle

Reputation: 67184

It might be worth using the right markup to properly achieve your desired effect. 

<button class="button">
      <span href="#" class="innerButton">
           button text
      </span>
</button>

Then you can use this CSS to move the span 1px down on click.

.button span
{
    position: relative;
}

/*while pressing*/

.button span:active
{
    top: 1px;
}

http://jsfiddle.net/UuyFe/

Upvotes: 8

Related Questions