CODEWITHSUNDEEP
htmlcss
BozanicJosip
BozanicJosip

Reputation: 507

Responsively change text of <button> element

I was wondering if it is possible through css to change the text of a button when the screen size is lower than 400px for example. Now I have something like <button>Next</button> and I want to change it to <button>-></button>. Is that possible?

Upvotes: 2

Views: 242

Answers (2)

NooBskie
NooBskie

Reputation: 3841

Another alternate way is to use css content an example being

HTML

<button id="button-one" name="button"></button>

CSS

#button-one::after{
  content:"NEXT"
}
@media (max-width: 400px) {
  #button-one::after{
    content:"->"
  }
}

Codepen http://codepen.io/noobskie/pen/ojgOWB

Here's a article by Chris Coyier who explains it well

https://css-tricks.com/swapping-out-text-five-different-ways/

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371163

HTML

<button id="button-one" name="button">NEXT</button>
<button id="button-two" name="button">-&gt;</button>

CSS

#button-two { display: none; }

@media (max-width: 400px) {
    #button-one { display: none; }
    #button-two { display: inline; }
}

DEMO: http://jsfiddle.net/ujag5eya/1/

Upvotes: 4

Related Questions