SOURCE

<div class="btn-box mb20">
	<span>搜</span>
	<input type="text" placeholder=" " />
</div>

.btn-box {
	color: #333;
	width: auto;
	border-radius: 25px;
    border: solid 1px #aaa;
	min-width: 32px;
	height: 32px;
	line-height: 32px;
	display: inline-block;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
	background-size: 104% 104%;
	cursor: pointer;
}

.btn-box span {
	position: absolute;
	right: 0;
	top: 0;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}

.btn-box input {
	display: inline-block;
	background: 0 0;
	border: none;
    border-radius: 25px;
	color: #333;
	padding-left: 20px;
	line-height: 32px !important;
	height: 32px;
	box-sizing: border-box;
	vertical-align: 4px;
	font-size: 16px;
	width: 32px;
	transition: all .3s ease-in-out;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 5px;
}
.btn-box:hover input {
	display: inline-block;
	width: 160px;
	padding-right: 32px
}

.btn-box input:not(:placeholder-shown) {
	display: inline-block;
	width: 160px;
	padding-right: 32px
}