Limiting the size of spans inside a button - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button layout

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button layout

Description

Limiting the size of spans inside a button

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Stack Overflow - Limiting the size of spans inside a button.</title> 
  <style>

button<!--  w  ww.j  a  va  2  s.c o  m-->
{
   margin: 20px;
   width: 200px;
   height: 32px;
   padding: 0px;
   background-color: #3c3c3c;
   border-style: solid;
   border-color: transparent;
   border-width: thin;
   border-radius: 16px;
   display: flex;
   justify-content: space-between;
   align-items: stretch;
}
button img
{
   margin-left: 12px;
   margin-right: 12px;
   width: 20px;
   height: 20px;
   align-self: center;
}
button span.Name
{
   margin-left: 5px;
   margin-right: 5px;
   width: 100px;
   font-weight: bold;
   text-align: left;
   color: #ffffff;
   white-space: nowrap;
   flex-grow: 1;
   align-self: center;
   overflow: hidden;
   text-overflow: ellipsis;
}
button span.Notification
{
   margin-left: 12px;
   margin-right: 12px;
   width: 20px;
   height: 20px;
   text-align: center;
   color: #dedede;
   background-color: #4d4d4d;
   border-style: solid;
   border-width: thin;
   border-color: transparent;
   border-radius: 50%;
   vertical-align: middle;
   line-height: 20px;
   align-self: center;
}


      </style> 
 </head> 
 <body translate="no"> 
  <button type="button"> 
  <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
  <span class="Name">Ibrahim Aziz asd asd asd asd asd asd</span> 
  <span class="Notification">14</span> </button>  
 </body>
</html>

Related Tutorials