Hi Praveend, 

Currently, we don't have any ootb control for the floating labels. 

However, I have created a custom control similar to your requirement which can be used, By following the below steps. Or download the steps.doc

1. Create the custom control with the Below Code. 

     For Creating Custom control,

• Go-To Records- User Interface - Control - Create 
• Enter Control Name,Choose proper ruleset Version and Click Create. 
• In Control - Go to HTML tab- Uncheck Auto-Generated
• Go To Parameters Tab - Add Parameter Size and Label as String

   Paste below code in HTML Source. 

<style>
  
/****  floating-Lable style start ****/
  
  input.error{
       outline: none !important;
    border-bottom: 2px solid red !important;
  }
  small.error{
    color: red !important;
    padding:4px !important;

  }
  small.errorwrapper{
        float: right;
    position: absolute;
    right: 25px;
    top: 6px;
  }
  small.errorwrapper .iconErrorDiv {
    margin-left :0px !important;
  }
  
.floating-label { 
  position:relative; 
  margin-bottom:20px; 
  margin-top:20px !important;
}
.floating-input , .floating-select {
  font-size:14px;
  padding:4px 4px !important;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent !important;
  border:none !important;
  border-bottom:1px solid #757575 !important;
  
}

.floating-input:focus , .floating-select:focus {
     outline:none !important;
     border-bottom:2px solid #5264AE !important; 
}

label.float-label {
  color:#999 !important; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE !important;
}

.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.floating-textarea {
   min-height: 30px;
   max-height: 260px; 
   overflow:hidden;
  overflow-x: hidden; 
}

/* highlighter */
.highlight {
  position:absolute;
  height:50%; 
  width:100%; 
  top:15%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* animation */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}


</style>

<pega:choose>
     <pega:when test='param.Size != ""'>
         <pega:save name="strExpectedSize" ref="param.Size" />
     </pega:when>
     <pega:when java='<%= !tools.getDictionary().fromDefinition(tools.getActive(), "pyExpectedSize").equals("") %>'>
         <% tools.putSaveValue("strExpectedSize", tools.getDictionary().fromDefinition(tools.getActive(), "pyExpectedSize")); %>
     </pega:when>
     <pega:otherwise>
         <pega:save name="strExpectedSize" value="50" />
     </pega:otherwise>
 </pega:choose>

<% 
    ClipboardProperty curProp = tools.getActive();
	String strValue="";
	
	String messageOnProp = curProp.getMessages();
   boolean propHasValidValue = curProp.hasValidValue();
	String messageOnPropAfter = curProp.getMessages();
	if(messageOnPropAfter.equals("") && !messageOnProp.equals("")){
		curProp.addMessage(messageOnProp);
	}
    
        tools.putSaveValue("formattedNumber",tools.getActiveValue());
        strValue = tools.getActiveValue();
        strValue = StringUtils.crossScriptingFilter(strValue);
        tools.putSaveValue("result", strValue);
   
%>

		    			<SPAN nowrap>
               
                 <div class="floating-label">
                     <small class="errorwrapper"> <pega:include name="Messages"/></small>
		        			<input  class="floating-input <% if(messageOnPropAfter.length()>0){  %> error <% } %> " placeholder="  " <pega:include name="ClientValidation"/> type="text" 
								size="<pega:reference name="$save(strExpectedSize)" />"
								name="<pega:reference name="$this-name" />"
						 		id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)" /><%= StringUtils.crossScriptingFilter(tools.getParamValue("pega_RLindex")) %>" 
								value="<pega:reference name="$save(formattedNumber)" />"> 
                  
                  <span class="highlight"></span>
                  <label class="float-label "><%=tools.getParamValue("Label") %></label>
                   <small class= "<% if(messageOnPropAfter.length()>0){  %> error <% } %> " > <%= messageOnPropAfter %></small>
                </div>          
        </SPAN>
		

2. In Your Section Drag a button Control - Change the control type by clicking on Chnage link and choose your newly created control.

3. You will be getting a parameters tab In your newly created Control, Enter the Label in Parameters Tab, and Remove Label from General tab. 

Incase if you face any issue let me know

View in Runtime.