How to use calc() and var() for a CSS button with dynamic value?












0















I obtained as CSS glossy button code from GitHub. In the CSS, there are three fixed width used (.container - width: 140px, .glossy - width: 120px, and .glossy:before - width: 110px) to design a glossy effect button. The button width is fixed. Is it possible to automatically calculate width for a custom text?



The snippet with code is below,






.container {

  width: 140px;

  margin: 50px auto;

}



.glossy p {

  margin: 6px 0 0 0;

  text-align: center;

  position: relative;

  z-index: 1;

}



.glossy {

  width: 120px;

  height: 25px;

  margin: 10px auto;

  position: relative;

  background: #94c4fe;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));

  background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);

  background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);

  background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);

  background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);

  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe', GradientType=0);

  -webkit-border-radius: 25px;

  -moz-border-radius: 25px;

  border-radius: 25px;

  border: 1px solid #4864a9;

  color: #000;

  font-size: 0.750em;

  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);

  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);

  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);

  position: relative;

}



.glossy:before {

  content: "";

  width: 110px;

  height: 16px;

  display: block;

  position: absolute;

  left: 5px;

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  border-radius: 8px;

  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(8%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));

  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);

  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);

  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);

  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);

}

<div class="container">

  <div class="glossy">

    <p>Hi, are you there?</p>

  </div>

</div>








html css







share|improve this question



























    0















    I obtained as CSS glossy button code from GitHub. In the CSS, there are three fixed width used (.container - width: 140px, .glossy - width: 120px, and .glossy:before - width: 110px) to design a glossy effect button. The button width is fixed. Is it possible to automatically calculate width for a custom text?



    The snippet with code is below,






    .container {
    
  width: 140px;
    
  margin: 50px auto;
    
}
    

    
.glossy p {
    
  margin: 6px 0 0 0;
    
  text-align: center;
    
  position: relative;
    
  z-index: 1;
    
}
    

    
.glossy {
    
  width: 120px;
    
  height: 25px;
    
  margin: 10px auto;
    
  position: relative;
    
  background: #94c4fe;
    
  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));
    
  background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    
  background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    
  background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    
  background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
    
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe', GradientType=0);
    
  -webkit-border-radius: 25px;
    
  -moz-border-radius: 25px;
    
  border-radius: 25px;
    
  border: 1px solid #4864a9;
    
  color: #000;
    
  font-size: 0.750em;
    
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
    
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
    
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
    
  position: relative;
    
}
    

    
.glossy:before {
    
  content: "";
    
  width: 110px;
    
  height: 16px;
    
  display: block;
    
  position: absolute;
    
  left: 5px;
    
  -webkit-border-radius: 8px;
    
  -moz-border-radius: 8px;
    
  border-radius: 8px;
    
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
    
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(8%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));
    
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
    
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
    
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
    
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
    
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
    
}

    <div class="container">
    
  <div class="glossy">
    
    <p>Hi, are you there?</p>
    
  </div>
    
</div>








    html css







    share|improve this question

























      0












      0








      0








      I obtained as CSS glossy button code from GitHub. In the CSS, there are three fixed width used (.container - width: 140px, .glossy - width: 120px, and .glossy:before - width: 110px) to design a glossy effect button. The button width is fixed. Is it possible to automatically calculate width for a custom text?



      The snippet with code is below,






      .container {
      
  width: 140px;
      
  margin: 50px auto;
      
}
      

      
.glossy p {
      
  margin: 6px 0 0 0;
      
  text-align: center;
      
  position: relative;
      
  z-index: 1;
      
}
      

      
.glossy {
      
  width: 120px;
      
  height: 25px;
      
  margin: 10px auto;
      
  position: relative;
      
  background: #94c4fe;
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));
      
  background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe', GradientType=0);
      
  -webkit-border-radius: 25px;
      
  -moz-border-radius: 25px;
      
  border-radius: 25px;
      
  border: 1px solid #4864a9;
      
  color: #000;
      
  font-size: 0.750em;
      
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
      
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  position: relative;
      
}
      

      
.glossy:before {
      
  content: "";
      
  width: 110px;
      
  height: 16px;
      
  display: block;
      
  position: absolute;
      
  left: 5px;
      
  -webkit-border-radius: 8px;
      
  -moz-border-radius: 8px;
      
  border-radius: 8px;
      
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(8%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));
      
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
      
}

      <div class="container">
      
  <div class="glossy">
      
    <p>Hi, are you there?</p>
      
  </div>
      
</div>








      html css







      share|improve this question














      I obtained as CSS glossy button code from GitHub. In the CSS, there are three fixed width used (.container - width: 140px, .glossy - width: 120px, and .glossy:before - width: 110px) to design a glossy effect button. The button width is fixed. Is it possible to automatically calculate width for a custom text?



      The snippet with code is below,






      .container {
      
  width: 140px;
      
  margin: 50px auto;
      
}
      

      
.glossy p {
      
  margin: 6px 0 0 0;
      
  text-align: center;
      
  position: relative;
      
  z-index: 1;
      
}
      

      
.glossy {
      
  width: 120px;
      
  height: 25px;
      
  margin: 10px auto;
      
  position: relative;
      
  background: #94c4fe;
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));
      
  background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe', GradientType=0);
      
  -webkit-border-radius: 25px;
      
  -moz-border-radius: 25px;
      
  border-radius: 25px;
      
  border: 1px solid #4864a9;
      
  color: #000;
      
  font-size: 0.750em;
      
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
      
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  position: relative;
      
}
      

      
.glossy:before {
      
  content: "";
      
  width: 110px;
      
  height: 16px;
      
  display: block;
      
  position: absolute;
      
  left: 5px;
      
  -webkit-border-radius: 8px;
      
  -moz-border-radius: 8px;
      
  border-radius: 8px;
      
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(8%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));
      
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
      
}

      <div class="container">
      
  <div class="glossy">
      
    <p>Hi, are you there?</p>
      
  </div>
      
</div>








      .container {
      
  width: 140px;
      
  margin: 50px auto;
      
}
      

      
.glossy p {
      
  margin: 6px 0 0 0;
      
  text-align: center;
      
  position: relative;
      
  z-index: 1;
      
}
      

      
.glossy {
      
  width: 120px;
      
  height: 25px;
      
  margin: 10px auto;
      
  position: relative;
      
  background: #94c4fe;
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));
      
  background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe', GradientType=0);
      
  -webkit-border-radius: 25px;
      
  -moz-border-radius: 25px;
      
  border-radius: 25px;
      
  border: 1px solid #4864a9;
      
  color: #000;
      
  font-size: 0.750em;
      
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
      
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  position: relative;
      
}
      

      
.glossy:before {
      
  content: "";
      
  width: 110px;
      
  height: 16px;
      
  display: block;
      
  position: absolute;
      
  left: 5px;
      
  -webkit-border-radius: 8px;
      
  -moz-border-radius: 8px;
      
  border-radius: 8px;
      
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(8%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));
      
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
      
}

      <div class="container">
      
  <div class="glossy">
      
    <p>Hi, are you there?</p>
      
  </div>
      
</div>





      .container {
      
  width: 140px;
      
  margin: 50px auto;
      
}
      

      
.glossy p {
      
  margin: 6px 0 0 0;
      
  text-align: center;
      
  position: relative;
      
  z-index: 1;
      
}
      

      
.glossy {
      
  width: 120px;
      
  height: 25px;
      
  margin: 10px auto;
      
  position: relative;
      
  background: #94c4fe;
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));
      
  background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
      
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe', GradientType=0);
      
  -webkit-border-radius: 25px;
      
  -moz-border-radius: 25px;
      
  border-radius: 25px;
      
  border: 1px solid #4864a9;
      
  color: #000;
      
  font-size: 0.750em;
      
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
      
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
      
  position: relative;
      
}
      

      
.glossy:before {
      
  content: "";
      
  width: 110px;
      
  height: 16px;
      
  display: block;
      
  position: absolute;
      
  left: 5px;
      
  -webkit-border-radius: 8px;
      
  -moz-border-radius: 8px;
      
  border-radius: 8px;
      
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(8%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));
      
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
      
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
      
}

      <div class="container">
      
  <div class="glossy">
      
    <p>Hi, are you there?</p>
      
  </div>
      
</div>





      html css




      html css






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 20 '18 at 13:19









      ak-SEak-SE

      4381519




      4381519
























          1 Answer
          1






          active

          oldest

          votes


















          1














          There's no need for calc or var here at all; just stop depending on fixed pixel sizes for everything.



          This uses inline-block instead of a fixed width on .glossy, to set the button width based on the contents; it also sets the the highlight on ::before to match the container width instead of using width at all (it was already absolute-positioned, so this was just a matter of adding a left rule along with the right one.)



          I also removed the .container rule as it wasn't doing anything relevant to the question, and removed a bunch of unnecessary or redundant rules, including the long-obsolete vendor-prefixed rules. 






          .glossy p {
          
  margin: 6px 0 0 0;
          
  text-align: center;
          
}
          

          
.glossy {
          
  display: inline-block;
          
  padding: 0 25px;
          
  height: 25px;
          
  position: relative;
          
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
          
  border-radius: 25px;
          
  border: 1px solid #4864a9;
          
  color: #000;
          
  font-size: 0.750em;
          
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
          
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
          
}
          

          
.glossy:before {
          
  content: "";
          
  height: 16px;
          
  position: absolute;
          
  right: 5px; left: 5px;
          
  border-radius: 8px;
          
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
          
}

          <div class="glossy">
          
  <p>short</p>
          
</div>
          

          
<div class="glossy">
          
  <p>medium medium</p>
          
</div>
          

          
<div class="glossy">
          
  <p>long text long text long text long text</p>
          
</div>





          The height is still fixed to a specific pixel size; it would have taken a more substantial rewrite to correct that, and the graphic design wouldn't really work at other heights anyway.






          share|improve this answer


























          • Sorry. I am not expert in CSS. I thought in programming style. Thank you..

            – ak-SE
            Nov 20 '18 at 13:53











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393902%2fhow-to-use-calc-and-var-for-a-css-button-with-dynamic-value%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          There's no need for calc or var here at all; just stop depending on fixed pixel sizes for everything.



          This uses inline-block instead of a fixed width on .glossy, to set the button width based on the contents; it also sets the the highlight on ::before to match the container width instead of using width at all (it was already absolute-positioned, so this was just a matter of adding a left rule along with the right one.)



          I also removed the .container rule as it wasn't doing anything relevant to the question, and removed a bunch of unnecessary or redundant rules, including the long-obsolete vendor-prefixed rules. 






          .glossy p {
          
  margin: 6px 0 0 0;
          
  text-align: center;
          
}
          

          
.glossy {
          
  display: inline-block;
          
  padding: 0 25px;
          
  height: 25px;
          
  position: relative;
          
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
          
  border-radius: 25px;
          
  border: 1px solid #4864a9;
          
  color: #000;
          
  font-size: 0.750em;
          
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
          
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
          
}
          

          
.glossy:before {
          
  content: "";
          
  height: 16px;
          
  position: absolute;
          
  right: 5px; left: 5px;
          
  border-radius: 8px;
          
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
          
}

          <div class="glossy">
          
  <p>short</p>
          
</div>
          

          
<div class="glossy">
          
  <p>medium medium</p>
          
</div>
          

          
<div class="glossy">
          
  <p>long text long text long text long text</p>
          
</div>





          The height is still fixed to a specific pixel size; it would have taken a more substantial rewrite to correct that, and the graphic design wouldn't really work at other heights anyway.






          share|improve this answer


























          • Sorry. I am not expert in CSS. I thought in programming style. Thank you..

            – ak-SE
            Nov 20 '18 at 13:53
















          1














          There's no need for calc or var here at all; just stop depending on fixed pixel sizes for everything.



          This uses inline-block instead of a fixed width on .glossy, to set the button width based on the contents; it also sets the the highlight on ::before to match the container width instead of using width at all (it was already absolute-positioned, so this was just a matter of adding a left rule along with the right one.)



          I also removed the .container rule as it wasn't doing anything relevant to the question, and removed a bunch of unnecessary or redundant rules, including the long-obsolete vendor-prefixed rules. 






          .glossy p {
          
  margin: 6px 0 0 0;
          
  text-align: center;
          
}
          

          
.glossy {
          
  display: inline-block;
          
  padding: 0 25px;
          
  height: 25px;
          
  position: relative;
          
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
          
  border-radius: 25px;
          
  border: 1px solid #4864a9;
          
  color: #000;
          
  font-size: 0.750em;
          
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
          
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
          
}
          

          
.glossy:before {
          
  content: "";
          
  height: 16px;
          
  position: absolute;
          
  right: 5px; left: 5px;
          
  border-radius: 8px;
          
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
          
}

          <div class="glossy">
          
  <p>short</p>
          
</div>
          

          
<div class="glossy">
          
  <p>medium medium</p>
          
</div>
          

          
<div class="glossy">
          
  <p>long text long text long text long text</p>
          
</div>





          The height is still fixed to a specific pixel size; it would have taken a more substantial rewrite to correct that, and the graphic design wouldn't really work at other heights anyway.






          share|improve this answer


























          • Sorry. I am not expert in CSS. I thought in programming style. Thank you..

            – ak-SE
            Nov 20 '18 at 13:53














          1












          1








          1







          There's no need for calc or var here at all; just stop depending on fixed pixel sizes for everything.



          This uses inline-block instead of a fixed width on .glossy, to set the button width based on the contents; it also sets the the highlight on ::before to match the container width instead of using width at all (it was already absolute-positioned, so this was just a matter of adding a left rule along with the right one.)



          I also removed the .container rule as it wasn't doing anything relevant to the question, and removed a bunch of unnecessary or redundant rules, including the long-obsolete vendor-prefixed rules. 






          .glossy p {
          
  margin: 6px 0 0 0;
          
  text-align: center;
          
}
          

          
.glossy {
          
  display: inline-block;
          
  padding: 0 25px;
          
  height: 25px;
          
  position: relative;
          
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
          
  border-radius: 25px;
          
  border: 1px solid #4864a9;
          
  color: #000;
          
  font-size: 0.750em;
          
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
          
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
          
}
          

          
.glossy:before {
          
  content: "";
          
  height: 16px;
          
  position: absolute;
          
  right: 5px; left: 5px;
          
  border-radius: 8px;
          
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
          
}

          <div class="glossy">
          
  <p>short</p>
          
</div>
          

          
<div class="glossy">
          
  <p>medium medium</p>
          
</div>
          

          
<div class="glossy">
          
  <p>long text long text long text long text</p>
          
</div>





          The height is still fixed to a specific pixel size; it would have taken a more substantial rewrite to correct that, and the graphic design wouldn't really work at other heights anyway.






          share|improve this answer















          There's no need for calc or var here at all; just stop depending on fixed pixel sizes for everything.



          This uses inline-block instead of a fixed width on .glossy, to set the button width based on the contents; it also sets the the highlight on ::before to match the container width instead of using width at all (it was already absolute-positioned, so this was just a matter of adding a left rule along with the right one.)



          I also removed the .container rule as it wasn't doing anything relevant to the question, and removed a bunch of unnecessary or redundant rules, including the long-obsolete vendor-prefixed rules. 






          .glossy p {
          
  margin: 6px 0 0 0;
          
  text-align: center;
          
}
          

          
.glossy {
          
  display: inline-block;
          
  padding: 0 25px;
          
  height: 25px;
          
  position: relative;
          
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
          
  border-radius: 25px;
          
  border: 1px solid #4864a9;
          
  color: #000;
          
  font-size: 0.750em;
          
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
          
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
          
}
          

          
.glossy:before {
          
  content: "";
          
  height: 16px;
          
  position: absolute;
          
  right: 5px; left: 5px;
          
  border-radius: 8px;
          
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
          
}

          <div class="glossy">
          
  <p>short</p>
          
</div>
          

          
<div class="glossy">
          
  <p>medium medium</p>
          
</div>
          

          
<div class="glossy">
          
  <p>long text long text long text long text</p>
          
</div>





          The height is still fixed to a specific pixel size; it would have taken a more substantial rewrite to correct that, and the graphic design wouldn't really work at other heights anyway.






          .glossy p {
          
  margin: 6px 0 0 0;
          
  text-align: center;
          
}
          

          
.glossy {
          
  display: inline-block;
          
  padding: 0 25px;
          
  height: 25px;
          
  position: relative;
          
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
          
  border-radius: 25px;
          
  border: 1px solid #4864a9;
          
  color: #000;
          
  font-size: 0.750em;
          
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
          
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
          
}
          

          
.glossy:before {
          
  content: "";
          
  height: 16px;
          
  position: absolute;
          
  right: 5px; left: 5px;
          
  border-radius: 8px;
          
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
          
}

          <div class="glossy">
          
  <p>short</p>
          
</div>
          

          
<div class="glossy">
          
  <p>medium medium</p>
          
</div>
          

          
<div class="glossy">
          
  <p>long text long text long text long text</p>
          
</div>





          .glossy p {
          
  margin: 6px 0 0 0;
          
  text-align: center;
          
}
          

          
.glossy {
          
  display: inline-block;
          
  padding: 0 25px;
          
  height: 25px;
          
  position: relative;
          
  background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
          
  border-radius: 25px;
          
  border: 1px solid #4864a9;
          
  color: #000;
          
  font-size: 0.750em;
          
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
          
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
          
}
          

          
.glossy:before {
          
  content: "";
          
  height: 16px;
          
  position: absolute;
          
  right: 5px; left: 5px;
          
  border-radius: 8px;
          
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
          
}

          <div class="glossy">
          
  <p>short</p>
          
</div>
          

          
<div class="glossy">
          
  <p>medium medium</p>
          
</div>
          

          
<div class="glossy">
          
  <p>long text long text long text long text</p>
          
</div>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 20 '18 at 13:52

























          answered Nov 20 '18 at 13:35









          Daniel BeckDaniel Beck

          13.5k51843




          13.5k51843













          • Sorry. I am not expert in CSS. I thought in programming style. Thank you..

            – ak-SE
            Nov 20 '18 at 13:53



















          • Sorry. I am not expert in CSS. I thought in programming style. Thank you..

            – ak-SE
            Nov 20 '18 at 13:53

















          Sorry. I am not expert in CSS. I thought in programming style. Thank you..

          – ak-SE
          Nov 20 '18 at 13:53





          Sorry. I am not expert in CSS. I thought in programming style. Thank you..

          – ak-SE
          Nov 20 '18 at 13:53




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393902%2fhow-to-use-calc-and-var-for-a-css-button-with-dynamic-value%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          How to pass form data using jquery Ajax to insert data in database?

          Image
          .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 1 I have 4 tables namely stud, country_master_academic,master_state and master_city. The main problem is that my form consists of many different fields like textbox, radio buttons, dropdown and an image file, so i am getting really confused. I can't insert data in database. Please help me. I tried many times but its not working. Thanks for the help in advance. Modal in home.php page <div class="container"> <div class="modal fade" id="add_data_modal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> ...
          Read more

          National Museum of Racing and Hall of Fame

          Image
          Coordinates: 43°04′35″N 73°46′24″W  /  43.0763°N 73.7734°W  / 43.0763; -73.7734 Professional sports hall of fame in Saratoga Springs, New York National Museum of Racing and Hall of Fame National Museum of Racing and Hall of Fame Established 1951 Location Saratoga Springs, New York Type Professional sports hall of fame Director Cathy Marino Curator Victoria Tokarowski Website racingmuseum.org The National Museum of Racing and Hall of Fame was founded in 1951 in Saratoga Springs, New York, to honor the achievements of American Thoroughbred race horses, jockeys, and trainers. In 1955, the museum moved to its current location on Union Avenue near Saratoga race course, at which time inductions into the hall of fame began. Each spring, following the tabulation of the final votes, the announcement of new inductees is made, usually during Kentucky Derby Week in early May. The actual inductions are held in mid-August during the Saratoga race meeting...
          Read more

          Guess what letter conforming each word

          Image
          6 $begingroup$ This is an entry in the Fortnightly Topic Challenge #41: Short and Sweet. 1 letter only could be mean anything . With an additional letter in front , could be used as medicine component and something you definitely learn or at least heard once. Add another letter in front , you would possibly hear that many times . Add an additional letter in front , you would found an independent country . With an additional letter, in the end , you would found something related to apple . Add another letter in the end , you would found something bad . Hint: Each letter is unique . word knowledge letters chemistry share | improve this question ...
          Read more