But this is a little tricky ;)
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://use.fontawesome.com/0809c7e939.js"></script>
<style>
.wrapper {
display: inline-block;
position: relative;
border: double 2px #708090;
border-radius: 5px;
}
input[type="text"] {
border: 0;
outline: none;
padding: 8px;
color: #708090;
font-size: 15px;
letter-spacing: 1px;
}
button[type="submit"] {
padding: 10px;
border: 0;
outline: none;
background-color: #708090;
color: #fff;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #5d6b79;
}
button[type="submit"]:active {
background-color: #3b4650;
}
</style>
</head>
<body>
<div class="wrapper">
<form method="post">
<input type="text" placeholder="Search Here...">
<button type="submit">
<span class="fa fa-search"></span>
</button>
</form>
</div>
</body>
</html>
Output:
No comments:
Post a Comment