CODEWITHSUNDEEP
htmlcssbutton
user14881722
user14881722

Reputation:

How to change the button text without javascript

Hey am confused that can we make <button>cat</button> to<button>bike</button> without using javascript. Can we make it using CSS?

Upvotes: 0

Views: 509

Answers (2)

Amirhossein Hassani
Amirhossein Hassani

Reputation: 409

you can use this:

this is on codepen.io

https://codepen.io/badurski/pen/YxJgoe

@import url("https://fonts.googleapis.com/css?family=Roboto:900");
body {
  background: #111;
}

a {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  color: black;
  text-decoration: none;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.h-button {
  background: white;
  padding: 20px;
  width: 250px;
  text-align: center;
}
.h-button span {
  display: inline-block;
  min-width: 0.3em;
  text-transform: uppercase;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  opacity: 0;
  transform: translate(0, -20px);
}
.h-button:before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  text-transform: uppercase;
  letter-spacing: 3.5px;
  opacity: 1;
  transform: translate(0, 0px);
}
.h-button:hover:before, .h-button:focus:before {
  opacity: 0;
  transform: translate(0, 20px);
}
.h-button:hover span, .h-button:focus span {
  opacity: 1;
  transform: translate(0, 0);
}
.h-button:hover span:nth-child(1), .h-button:focus span:nth-child(1) {
  transition-delay: 0.025s;
}
.h-button:hover span:nth-child(2), .h-button:focus span:nth-child(2) {
  transition-delay: 0.05s;
}
.h-button:hover span:nth-child(3), .h-button:focus span:nth-child(3) {
  transition-delay: 0.075s;
}
.h-button:hover span:nth-child(4), .h-button:focus span:nth-child(4) {
  transition-delay: 0.1s;
}
.h-button:hover span:nth-child(5), .h-button:focus span:nth-child(5) {
  transition-delay: 0.125s;
}
.h-button:hover span:nth-child(6), .h-button:focus span:nth-child(6) {
  transition-delay: 0.15s;
}
<a aria-label='Thanks' class='h-button centered' data-text='Hover me' href='#'>
  <span>T</span>
  <span>h</span>
  <span>a</span>
  <span>n</span>
  <span>k</span>
  <span>s</span>
</a>

Upvotes: 0

Max
Max

Reputation: 109

With that exact HTML markup, using content should give you that option. First we make cat's font size to 0 to hide it, and adding a font-size to button::before to override the parent style and make 'bike' display.

button {
  font-size: 0;
}

button::before {
  content: 'bike';
  font-size: 12px;
}

Upvotes: 2

Related Questions