Develop Reference

I need JS code of creating text select and share button

I am trying to create a Select and Share button by following an example. I added only twitter and WhatsApp options for now. But the problem is that whenever I add the js code function for whatsappShareBtn, none of the buttons works and after removing it, twitterShareBtn works fine.
const selectableTextArea = document.querySelectorAll(".selectable-text-area");
const twitterShareBtn = document.querySelector("#twitter-share-btn");
const whatsappShareBtn = document.querySelector("#whatsapp-share-btn");
selectableTextArea.forEach(elem => {
elem.addEventListener("mouseup", selectableTextAreaMouseUp);
});
twitterShareBtn.addEventListener("click", twitterShareBtnClick);
whatsappShareBtn.addEventListener("click", whatsappShareBtnClick);
document.addEventListener("mousedown", documentMouseDown);
function selectableTextAreaMouseUp(event) {
setTimeout(() => { // In order to avoid some weird behavior...
const selectedText = window.getSelection().toString().trim();
if (selectedText.length) {
const x = event.pageX;
const y = event.pageY;
const twitterShareBtnWidth = Number(getComputedStyle(twitterShareBtn).width.slice(0, -2));
const twitterShareBtnHeight = Number(getComputedStyle(twitterShareBtn).height.slice(0, -2));
const whatsappShareBtnWidth = Number(getComputedStyle(whatsappShareBtn).width.slice(0, -2));
const whatsappShareBtnHeight = Number(getComputedStyle(whatsappShareBtn).height.slice(0, -2));
if (document.activeElement !== twitterShareBtn) {
twitterShareBtn.style.left = `${x - twitterShareBtnWidth*0.5}px`;
twitterShareBtn.style.top = `${y - twitterShareBtnHeight*1.25}px`;
twitterShareBtn.style.display = "block";
twitterShareBtn.classList.add("btnEntrance");
} else {
twitterShareBtn.style.left = `${x-twitterShareBtnWidth*0.5}px`;
twitterShareBtn.style.top = `${y-twitterShareBtnHeight*0.5}px`;
}
if (document.activeElement !== whatsappShareBtn) {
whatsappShareBtn.style.left = `${x - whatsappShareBtnWidth*1.50}px`;
whatsappShareBtn.style.top = `${y - whatsappShareBtnHeight*1.25}px`;
whatsappShareBtn.style.display = "block";
whatsappShareBtn.classList.add("btnEntrance");
} else {
whatsappShareBtn.style.left = `${x-whatsappShareBtnWidth*0.5}px`;
whatsappShareBtn.style.top = `${y-whatsappShareBtnHeight*0.5}px`;
}
}
}, 0);
}
function documentMouseDown(event) {
if (event.target.id !== "twitter-share-btn" && getComputedStyle(twitterShareBtn).display === "block") {
twitterShareBtn.style.display = "none";
twitterShareBtn.classList.remove("btnEntrance");
window.getSelection().empty();
}
if (event.target.id !== "whatsapp-share-btn" && getComputedStyle(whatsappShareBtn).display === "block") {
whatsappShareBtn.style.display = "none";
whatsappShareBtn.classList.remove("btnEntrance");
window.getSelection().empty();
}
}
function twitterShareBtnClick(event) {
const selectedText = window.getSelection().toString().trim();
if (selectedText.length) {
// General Twitter Share URL: https://twitter.com/intent/tweet?text={title}&url={url}&hashtags={hash_tags}&via={user_id}
const twitterShareUrl = "https://twitter.com/intent/tweet";
const text = `${encodeURIComponent(selectedText)}`;
const currentUrl = encodeURIComponent(window.location.href);
const hashtags = "helloworld, test, testing";
const via = "CodingJrney";
window.open(`${twitterShareUrl}?text="${text}"&url=${currentUrl}&hashtags=${hashtags}&via=${via}`);
}
}
function whatsappShareBtnClick(event) {
const selectedText1 = window.getSelection().toString().trim();
if (selectedText1.length) {
const whatsappShareUrl = "https://api.whatsapp.com/send";
const text = `${encodeURIComponent(selectedText1)}`;
window.open(`${whatsappShareUrl}?text="${text}"`);
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;
color: #333;
font-size: 1.25rem;
}
.container {
padding: 1.5rem 10rem;
}
h1 {
font-size: 3rem;
margin: 1.25rem 0;
}
h2 {
font-size: 2rem;
}
hr {
margin: 3rem 0;
border: 0;
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
}
p {
margin-bottom: 2rem;
line-height: 1.75rem;
}
/* =============================== DEFAULT*/
#twitter-share-btn {
width: 40px;
height: 2.5rem;
font-size: 1.25rem;
color: #ffffff;
background-color: rgb(0, 0, 0);
cursor: pointer;
border: 2px solid #868686;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: none;
transition: color 0.2s, background-color 0.2s ease-in-out;
}
#twitter-share-btn:hover {
color: #fff;
background-color: #56b8f5;
}
#twitter-share-btn i {
pointer-events: none;
}
.btnEntrance {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-name: btnEntrance;
}
#whatsapp-share-btn {
width: 40px;
height: 2.5rem;
font-size: 1.25rem;
color: #ffffff;
background-color: rgb(0, 0, 0);
cursor: pointer;
border: 2px solid #868686;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: none;
transition: color 0.2s, background-color 0.2s ease-in-out;
}
#whatsapp-share-btn:hover {
color: #fff;
background-color: #56b8f5;
}
#whatsapp-share-btn i {
pointer-events: none;
}
.btnEntrance {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-name: btnEntrance;
}
#keyframes btnEntrance {
/* zoomIn */
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 1;
}
}
#media(max-width: 992px) {
.container {
padding: 1.25rem 6rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.75rem;
}
}
#media(max-width:768px) {
html {
font-size: 12px;
}
.container {
padding: 1rem 3rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
hr {
margin: 1.5rem 0;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conquering Responsive Layouts</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="style.css">
<!-- <script src="nav.js"></script> -->
</head>
<body>
<div class="container">
<div class="selectable-text-area">
<h1>A Visual Type Scale</h1>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h2>A Visual Type Scale</h2>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h3>A Visual Type Scale</h3>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h4>A Visual Type Scale</h4>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<h5>A Visual Type Scale</h5>
<p>What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.</p>
<p>When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.</p>
<p>— Excerpt from A Voyage to Arcturus, by David Lindsay.</p>
</div>
</div>
<div class="button">
<button id="twitter-share-btn"> W </button>
<button id="whatsapp-share-btn"> T </button>
</div>
<script src="script.js"></script>
</body>
</html>

How to disable a html range slider?

(setting disabled = 'true' didn't seem to work for me so this is another way around it)
How do you disable an HTML range slider, for example when a button is pressed:
<input type="range" class="tempo-slider" max="300" min="1" value="150" />
I couldn't find the answer anywhere but this is my fix to the issue:

My fix for it was constantly resetting the range slider's value when you a user tried to change it using:
event.target.value = bpm;
Where event is the clicking of the event slider.
My full code is here, I hope it can help someone:
//This is code taken from a larger oop project and so some of the logic may look janky, but I just made it work for this example
//These two variable need to be predefined
let bpm = 150;
let playing = false;
//Select your slider and button from your html:
const tempoSlider = document.querySelector(".tempo-slider");
const playButton = document.querySelector(".play");
//Update the html function, essentially purely for styling
updateHTML = function () {
if (!playing) {
tempoSlider.classList.toggle("inactive");
playButton.innerText = "Stop";
playButton.classList.toggle("active");
playing = true;
} else {
tempoSlider.classList.toggle("inactive");
playButton.innerText = "Play";
playButton.classList.toggle("active");
playing = false;
}
};
//this fucntion updates the temp text and the slider
function changeTempo(event) {
//get the temp number from the document
const tempoText = document.querySelector(".tempo-number");
if (!tempoSlider.classList.contains("inactive")) {
//if the slider isnt inactive then update the bpm as usual
bpm = event.target.value;
tempoText.innerText = bpm;
} else {
//else just make the slider reset to the preset bmp, this way it will not change
event.target.value = bpm;
}
}
//add event listeners to the button and the range slider
tempoSlider.addEventListener("input", function (event) {
changeTempo(event);
});
playButton.addEventListener("click", function () {
updateHTML();
});
/*All of this styling just makes it clear when the temp slider is inactive*/
:root {
--background-color: #ffffff;
--text-color: #322e2f;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.play {
width: 10rem;
transition: all 0.5s ease;
padding: 1rem 2rem;
font-size: 1.5rem;
background: var(--text-color);
color: var(--background-color);
border: none;
cursor: pointer;
margin-top: 3rem;
outline: none;
border: solid 0.01rem var(--text-color);
}
.play.active {
color: var(--text-color);
background: var(--background-color);
border: solid 0.01rem var(--text-color);
}
.tempo {
margin: 1rem;
width: 20%;
}
.tempo-slider {
transition: all 0.5s ease;
padding: 0.3rem;
-webkit-appearance: none;
appearance: none;
margin: 1rem 0rem;
outline: none;
width: 100%;
position: relative;
background: var(--text-color);
cursor: pointer;
border-radius: 2rem;
border: solid 0.05rem var(--text-color);
}
.tempo-slider::-webkit-slider-thumb {
transition: all 0.5s ease;
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
border-radius: 2rem;
background: var(--background-color);
cursor: pointer;
}
.tempo-slider.inactive {
background: var(--background-color);
}
.tempo-slider.inactive::-webkit-slider-thumb {
background: var(--text-color);
}
.tempo p {
font-size: 1.5rem;
text-align: center;
}
<!--This is part of a larger project I have scaled back to display the slider-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--Basic button to say start an audio file-->
<button class="play">Play</button>
<!-- slider to devide the audio's bpm-->
<div class="tempo">
<input type="range" class="tempo-slider" max="300" min="1" value="150" />
<p>Tempo: <span class="tempo-number">150</span></p>
</div>
<script src="app.js"></script>
</body>
</html>
The full project should be done in the next week and available on my github here: https://github.com/MichealNestor01

Transition event listener doesn't execute

I'm working on transitions by using javascript. But i want to display element to none when the transition is end. I'm using addEventListener on element but function doesn't execute.
var fun;
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
(function(){
var i=0,
containterget = document.querySelector('.container');
elementGet = document.querySelector('.Number');
fun = function(){
i++;
elementGet.innerHTML = i;
elementGet.style.transform = 'translateX('+(containterget.offsetWidth - 40 -35)+'px)';
elementGet.addEventListener(transitions,function(event){
console.log("Transition End Execute");
elementGet.style.display='none';
} );
};
})();
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
border:1px solid green;
max-width:85%;
margin: 2em auto 0;
}
button{
background-color:transparent;
padding: 15px;
margin:0;
color:#000;
border:2px solid #F44336;
text-align: center;
outline: 0;
transition: opacity 0.3s;
}
button:hover{
background-color:#F44336;
color: white;
opacity :.75;
}
button:hover{
cursor: pointer;
transition: opacity .4s;
}
span{
display: inline-block;
transition: transform 1.5s ease;
}
.Number{
font-size: 4em;
border:1px solid black;
/*transform: translateX(0);*/
}
.EndBoundry{
float: right;
font-size: 4em;
border:1px solid black;
}
.contain:after{
content: "";
display: table;
clear: both;
}
.btn{
text-align: center;
margin: 2em 0;
}
<div class="container contain">
<span class="Number">1</span>
<span class="EndBoundry">E</span>
</div>
<div class="btn">
<button onclick="fun()">Number Transition Click</button>
</div>

The following Snippet demonstrates the transitionend event. All details are commented in Snippet.
SNIPPET
// Reference the section#area and input#gone
var area = document.getElementById('area');
var chx = document.getElementById('gone');
// Register click event on #area call offON()
area.addEventListener('click', offON, false);
function offON(e) {
// Determine the clicked button
if (e.target !== e.currentTarget) {
var tgt = e.target;
// Switch clicked button classes .on and .off
tgt.classList.toggle('on');
tgt.classList.toggle('off');
}
// If the checkbox is checked call transEND()
if (chx.checked) {
transEND()
}
}
function transEND() {
// Register the transitionend event on #area
area.addEventListener("transitionend", function(e) {
// Determine which button was clicked
if (e.target !== e.currentTarget) {
var tgt = e.target;
// Clicked button will disappear after transition
tgt.style.display = 'none';
}
}, false);
}
/* All buttons will have the same
|| transition. This transition is
|| dependent upon another animatable
|| style to exist.
*/
/* This particular transition says:
|| ALL animatable styles have a
|| duration of 3 seconds,
|| with a timing function: ease,
|| and a delay of 300msec
*/
button {
width: 120px;
height: 40px;
transition: all 3s ease .3s
}
/* Classes .on and .off are "states"
|| to each #id the "states" have a
|| different meaning
*/
#fade.off {
opacity: 1;
}
#fade.on {
opacity: 0;
}
#move.off {
transform: translateY(0);
}
#move.on {
transform: translateY(200px);
}
#shrink.off {
transform: scale(1);
}
#shrink.on {
transform: scale(.3);
}
#gone {
width: 18px;
height: 18px;
}
p {
font-size: 12px;
}
<p>Click each button. Then click them again (the "FADER" is still there and clickable)</p>
<p>Now click the checkbox and push the buttons again. If you can't click the buttons back to original "state", then the event handler on transitionend was successful.</p>
<label for='gone'>Enable "transitionEND" </label>
<input id='gone' type='checkbox'>
<section id='area'>
<button id='fade' class='off'>FADER</button>
<button id='move' class='off'>MOVER</button>
<button id='shrink' class='off'>SHRINKER</button>
</section>

Use "transitionend" without prefixes
elementGet.addEventListener("transitionend", function(){});

You can listen to transitionend event on supported browsers.
I did some reshuffling of your codes and add an id tag to your button.
See snippet below
var fun;
var i = 0,
containterget = document.querySelector('.container');
elementGet = document.querySelector('.Number');
console.log(elementGet)
function execute(event) {
console.log("Transition End Execute");
alert("Transition End Execute");
elementGet.style.display = 'none';
}
fun = function() {
i++;
elementGet.innerHTML = i;
elementGet.style.transform = 'translateX(' + (containterget.offsetWidth - 40 - 35) + 'px)';
elementGet.addEventListener('transitionend', execute);
elementGet.addEventListener('webkitTransitionEnd', execute);
elementGet.addEventListener('mozTransitionEnd', execute);
elementGet.addEventListener('oTransitionEnd', execute);
};
document.getElementById("target").addEventListener("click", fun)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid green;
max-width: 85%;
margin: 2em auto 0;
}
button {
background-color: transparent;
padding: 15px;
margin: 0;
color: #000;
border: 2px solid #F44336;
text-align: center;
outline: 0;
transition: opacity 0.3s;
}
button:hover {
background-color: #F44336;
color: white;
opacity: .75;
}
button:hover {
cursor: pointer;
transition: opacity .4s;
}
span {
display: inline-block;
transition: transform 1.5s ease;
}
.Number {
font-size: 4em;
border: 1px solid black;
/*transform: translateX(0);*/
}
.EndBoundry {
float: right;
font-size: 4em;
border: 1px solid black;
}
.contain:after {
content: "";
display: table;
clear: both;
}
.btn {
text-align: center;
margin: 2em 0;
}
<div class="container contain">
<span class="Number">1</span>
<span class="EndBoundry">E</span>
</div>
<div class="btn">
<script></script>
<button id="target">Number Transition Click</button>
</div>

How can I Disable a Clickable div right after onclick is initiated?

I couldnt find any answers on stack overflow to this specific question. I am trying to use pure javascript ONLY, so please no jquery answers.
So I posted all of my code as a general reference but my problem I believe lies in the javascript section. My question is, how can I make it so that my div "signup" is unclickable right AFTER it is clicked ONCE?
I tried putting a disable statement before frame and fadeOut are called inside the HideLogin() function. I also tried with css pointer-events. Nothing works and everytime I click SignUp, the animations repeat. Thank you in advance for the help.
function HideLogin() {
var login = document.getElementById("login");
var SignUpSheet = document.getElementById("SignUpSheet");
var titlecard = document.getElementById("titlecard");
var signup = document.getElementById("signup");
SignUpSheet.style.display = "block";
titlecard.style.display = "block";
frame(signup);
fadeOut(login);
/*fadeIn(document.getElementById("SignUpSheet"));
fadeIn(document.getElementById("titlecard")); */
}
function frame(signup) {
var pos = 125;
var id = setInterval(function() {
if (pos == 0) {
clearInterval(id);
} else {
pos--;
signup.style.top = pos + 'px';
}
}, 1);
}
function fadeOut(element) {
var op = 1; // initial opacity
var timer = setInterval(function() {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 20);
}
function fadeIn(element) {
var op = 0.1; // initial opacity
var timer = setInterval(function() {
if (op >= 1) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.display = "block";
op += 0.1;
}, 20);
}
body,
html {
min-height: 100%;
}
body
/* Background handeling*/
{
color: white;
background: url(images/Hunter.jpg) center no-repeat;
background-size: cover;
background-color: #444;
}
/*------------------------------------------------------------- */
#logBox
/*Div that holds two links */
{
position: relative;
//border: 2px solid white;
height: 300px;
width: 300px;
margin-left: 70px;
margin-top: 50px;
}
#login
/* login link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#login:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
#signup
/* sign up link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top: 125px;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#signup:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
/*--------------------------------------------------------------- */
/* Div that holds two sheets */
#LogInSheet {
display: none;
}
#LoginTitle {}
#SignUpSheet {
display: none;
}
#SignUpTitle {}
/*--------------------------------------------------------------- */
#titlecard
/*title display */
{
position: absolute;
display: none;
bottom: 0px;
right: 50px;
//border: 2px solid white;
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 45px;
color: gray;
text-align: center;
font-family: papyrus;
text-shadow: 2px 2px black;
}
<!doctype html>
<html>
<head>
<title>The Prime Legion</title>
<link rel="stylesheet" type="text/css" href="page1.css">
<script type="text/javascript" src="page1.js"></script>
</head>
<body>
<div id="logBox">
<div id="login" onclick="HideSignin()">
Log In
</div>
<div id="signup" onclick="HideLogin()">
Sign Up
</div>
</div>
<div id="LogInSheet">
<div id="LoginTitle">
<p>
<h4>Hello</h4>
</p>
</div>
</div>
<div id="SignUpSheet">
<div id="SignupTitle">
<p>
<h4>Welcome</h4>
</p>
</div>
</div>
<div id="titlecard">
<p>
<h1>The Prime Legion</h1>
</p>
</div>
</body>
</html>

Unless you have a particular need to use <div>s for your buttons, you could change the HTML to use <button> elements instead. That way you could disable it using the disabled attribute and it should prevent any further clicks without having to store and track any additional JavaScript variables.
<button id="signup" onclick="HideLogin()">Sign Up</button>
function HideLogin() {
document.getElementById("signup").disabled = true;
...
}

I would suggest the following:
define a global variable loginCliked=false
then in your HideLogin function:
HideLogin = function(){
if(!loginClicked){
loginClicked=true;
// Do everything else
}
}
So that with the first click it will set loginClicked to true. If you click the button for the second time it does nothing

Animate button to expand to new text

I'm trying to animate a button with two states: saved and unsave. When it goes from save -> unsave, it should slowly expand and add the next text. It should do the reverse when going from unsave to save. I have the following fiddle:
https://jsfiddle.net/4x0svuLd/2/
My problem right now is that even though I have designated a width transition, it seems to ignoring it. My issue is this button could have arbitrary text, thats just boolean in nature, so I can't know the exact width beforehand. I just need to it animate to the proper text width, whatever that text is.
HTML:
<div class="button" >
<text class="text"> Save </text>
</div>
CSS:
.button {
background-color: transparent;
border: 1px solid;
border-color: black;
border-radius: 6px;
color: black;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-top: 8px;
outline-style: none;
padding: 6px 10px;
text-align: center;
transition: width 2s cubic-bezier(0.23, 1, 0.32, 1);
width: auto;
}
.button-depressed {
color: white;
background-color: #ADD8E6;
border-color: transparent;
}
JS:
var isSaved = false
function doSaveAnimation() {
var button = document.getElementsByClassName("button")[0];
button.classList.add("button-depressed");
setTimeout(function() {
button.innerHTML = "Unsave";
}, 80);
}
function doUnsaveAnimation() {
var button = document.getElementsByClassName("button")[0];
button.classList.remove("button-depressed");
setTimeout(function() {
button.innerHTML = "Save";
}, 80);
}
function animate(){
if (isSaved) {
doUnsaveAnimation();
} else {
doSaveAnimation();
}
isSaved = !isSaved;
}
document.getElementsByClassName("button")[0].addEventListener("click", animate);

You could calculate the width of the text that you are setting to the button, and set calculated width to the button accordingly;
Once right away, and then each click.
you could also set the transition to everything, not just the width of the button - for smoother animation.
In this post you have several examples of how to determine width of text, i have adapted one of those to the solution below:
var isSaved = false;
var button = document.getElementsByClassName("button")[0];
button.style.width = getWidthOfText("Save", "14","sans-serif") +20+ "px";
function getWidthOfText(txt, fontsize) {
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
ctx.font = fontsize + 'px' ;
var length = ctx.measureText(txt).width;
return length;
}
function doSaveAnimation() {
button.classList.add("button-depressed");
setTimeout(function() {
button.innerHTML = "Unsave";
console.log(button.offsetWidth);
}, 120);
button.style.width = getWidthOfText("Unsave", "14") +20+ "px";
}
function doUnsaveAnimation() {
button.classList.remove("button-depressed");
setTimeout(function() {
button.innerHTML = "Save";
console.log(button.offsetWidth);
}, 120);
button.style.width = getWidthOfText("Save", "14") +20+ "px";
}
function animate() {
if (isSaved) {
doUnsaveAnimation();
} else {
doSaveAnimation();
}
isSaved = !isSaved;
}
document.getElementsByClassName("button")[0].addEventListener("click", animate);
.button {
background-color: transparent;
border: 1px solid;
border-color: black;
border-radius: 6px;
color: black;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-top: 8px;
outline-style: none;
padding: 6px 10px;
text-align: center;
transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
text-align:center;
}
.button-depressed {
color: white;
background-color: #ADD8E6;
border-color: transparent;
transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
}
<div class="button">
<text class="text">Save</text>
</div>

One way to do this without javascript is to use max-width instead of width.
https://jsfiddle.net/LjchoLqt/
.button {
transition: max-width 2s cubic-bezier(0.23, 1, 0.32, 1);
width: auto;
max-width: 2em;
}
.button-depressed {
max-width:4em;
}
You'll need to pay around with the values to make sure it doesn't cut off. This isnt an ideal solution though, especially if you don't control the content (eg it's populated by a CMS)