I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}
Related
I have been trying to set the .flex-container to cover entire page below the horizontal rule, but when I resize the window, in around 1200px width, the flex box container is not going all the way down. I am fine with the buttons coming as a column when viewing on a small screen, as already happening.
what I want to happen
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: relative;
left: 0;
right: 0;
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration:0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration:0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px){
.flex-container>button{
margin: 7%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Papers</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600&family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="public/css/styles.css">
</head>
<body>
<div class="heading">
<h1>Loren ipsum</h1>
</div>
<hr style="margin:0;position: relative;left:-15px;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">
<div class="flex-container">
<button>1Year</button>
<button>2Year</button>
<button>3Year</button>
<button>4Year</button>
</div>
</body>
</html>
If you make the styling of the flex-container:
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Then it will certainly cover the whole page.
I'm not sure I understand the point of using position: absolute, so if that's not requisite, you get rid of position:absolute and instead change it to height: 100vh, it'll stretch to be equal to the vertical height of the viewport. If 100vh is too tall, you can change it accordingly.
Another option would be to give the body a dynamic height like 100vh (which will force the entire page to be exactly the height of the viewport) and add overflow:hidden to the body. Note, in this scenario if any of the buttons wrap and force the parent div to be any larger, you won't be able to scroll to them.
A final option would be to wrap the whole thing in a wrapper div and then make that div display: flex; see here: https://jsfiddle.net/slingtruchoice/jc03nft2/
Position absolute can be really annoying to work with, in my humble opinion. I avoid it when possible, simply because it affects the way other elements (siblings in particular, ie divs that come after your .flex-container div) interact with it. The use cases for position: absolute would be if you're trying to overlay an object on top of another object, or move it to a non-standard position within a parent container. If you look at the jsfiddle link at the bottom, i've included an example of ways to use position:absolute at the top.
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
height: 100vh; /* here's the change*/
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration: 0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration: 0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px) {
.flex-container>button {
margin: 7%;
}
}
<div class="heading">
<h1>Hello World!</h1>
</div>
<div class="flex-container">
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
</div>
https://jsfiddle.net/slingtruchoice/56e0sj4k/
I was told to add a fixed nav bar to the code I had made previously.
Here is the CSS for the code. I reviewed it a lot but can't seem to find the issue with it.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
/* overflow: hidden;*/
background-color: #c4a1a2;
}
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
text-align: center;
color: #ffffff;
font-size: 5vw;
}
h2{
text-align: center;
color: #ffffff;
font-size: 3vw;
}
.table{
width: 100%;
/* height: 00px;*/
}
.table img{
width: 49.5%;
}
.table td{
width: 49.5%;
}
#wrapper
{
width: 99%;
/* max-width: 1500px;*/
min-width: 700px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
/* box-shadow: 3px 3px 3px #666666;*/
}
.navbar {
/*
overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
Here's the actual code. I think it's an issue with the container class but I'm not sure. When I commented out the Wrapper ID it was like the nav bar didn't even exist.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kayak Spot</title>
<link rel="icon" type="image/x-icon" href="images\RVC-Circles-Logo.jpg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layout.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
<div id="wrapper">
<div class="container">
<img src="Images/woman-kayaking.jpg" alt="Kayaking" style="width:100%;">
<div class="centered">
<h1>Kayaking, The pastime to calm your nerves.</h1>
</div>
</div>
<div class="table container">
<tr>
<td><img src="Images/sport%20(1).jpg">
<div class="centered">
<h2>Be it for sport or for leisure, Kayaking is one activity you can't miss.</h2>
</div>
</td>
<td><img src="Images/sport%20(2).jpg"></td>
</tr>
</div>
</div>
</body>
</html>
If you want to have a fixed bar at the top of the page, use this piece of code for the navbar class in your css. With this piece of code, your navbar class will be placed at the top of the page.
.navbar {
background-color: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.navbar a {
display: flex;
justify-content: center;
align-items: center;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Better than using a flex display.
If the navbar falls on the rest of the elements, just give the body or #wrapper margin
#wrapper {
width: 99%;
margin-top: 50px;
}
or
body {
margin-top: 50px;
}
I've been playing about with media queries in hopes of getting my head around creating a responsive page.
I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?
html {
scroll-behavior: smooth;
}
body{
font-family: 'Nunito';
background: linear-gradient(#47585B, #E8EFF0);
}
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 2px;
/* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0px;
margin-top: 0.1em;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
background-color: #e6763c90;
box-sizing: border-box;
padding: 0 2rem;
box-shadow: 2px 0px 100px 10px #e6763c90;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
a {
color: black;
text-decoration: none;
}
li {
display: inline-block;
padding: 7px;
margin: 0 0 0 2.5em;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 70vh;
padding: 10rem;
text-align: center;
/* border: 1px solid black; */
}
.dropDown{
display: none;
}
/* On hover animations */
li:hover{
transform: scale(1.08);
}
/* Smaller Screen */
#media (max-width: 1100px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: inline;
margin: 2rem;
z-index: 1000;
}
ul {
position: relative;
bottom: 1.4rem;
}
/* Adjust underline on smaller screen */
h1::after{
content: "";
display: none;
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
li::after{
content: "";
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
z-index: 10000;
}
}
/* Mobile */
#media (max-width: 800px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar {
display:none;
margin:1.2rem;
}
/* Adjust underline on mobile */
h1::after{
content: "";
position: absolute;
width: 100%;
margin-top: 0.1em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1 class="">Original Tombstones</h1>
<ul class="navbar">
<li>New Memorials</li>
<li>Additionals</li>
<li>Renovations</li>
<li>Contact Us</li>
</ul>
</header>
<div class="container" id="home">
<h2>About Us</h2>
</div>
<div class="container" id="new">
<h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
<h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
<h2>Renovations</h2>
</div>
<div class="container" id="contact">
<h2>Get In Touch</h2>
</div>
</body>
</html>
I apologise in advance if my code looks messy but I've not got my head round that bit yet!
Cheers!
So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.
But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .
Try to add the following keywords: only, screen on the media queries ex:
#media only screen (max-width: 800px) {
Also add the following meta tag on your html head :
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
https://www.w3schools.com/css/css_rwd_viewport.asp
I am trying to create a website. In which there is an animated search bar which I got from youtube. I am trying to use flexbox for my navbar and everything works except for the position of my search bar. The picture of my nav bar until now.
and this the code for my html and css some of it is cut out.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/20c0c25f7c.js" crossorigin="anonymous"></script>
<title>HTML Elements Reference</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<style>
body{
font-family: Helvetica, sans-serif;
background: black;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
transform: translate(0%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: black;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
</style>
</head>
<body>
<nav class="container">
<div class="search-box">
<input class= "search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
</body>
</html>
Can you help me out with the CSS and HTML and try not to use margin property for the search bar.
I would like the search bar to be fully centered in my flexbox.
As mdn says:
The translate() CSS function repositions an element in the horizontal
and/or vertical directions. Its result is a data
type.
So it is necessary just remove property transform: translate(0%, -50%); to place correctly your searchbar:
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
An example:
body{
font-family: Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: lightgreen;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: lightpink;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<nav class="container">
<div class="search-box">
<input class="search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
UPDATE:
When you use double percentage values transform: translate(0%, -50%); in translate function, then the second value is for the height of the reference box:
This value describes two or
values representing both the abscissa (x-coordinate) and
the ordinate (y-coordinate) of the translating vector. A percentage as
first value refers to the width, as second part to the height of the
reference box defined by the transform-box property.
I want to insert an image in a placeholder and make it appear on the right. The background of the placeholder is white, the image is also white but I want to add a gray background so it could be visible. Like this:
I thought to add the image as a button but it could't appear just like that. Any suggestions?
You can follow this method for icon background, else use image instead of <i class="fa fa-search"></i> which is a Font Awesome icon.
.form-group {
position: relative;
}
input {
width: 100%;
height: 50px;
border: 1px solid #666;
padding-right: 70px;
box-sizing: border-box;
}
.icon {
position: absolute;
font-size: 36px;
top: 0px;
height: 100%;
right: 0px;
line-height: 50px;
background: #666;
text-align: center;
width: 70px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="form-group">
<input type="text" />
<span class="icon">
<i class="fa fa-search"></i>
</span>
</div>
</body>
Maybe you can consider using a label using fontawesome to display the image.
label {
display: inline-block;
margin: 0;
padding: .1em .3em;
background: darkgray;
color: white;
cursor: pointer;
}
label:after {
content: "\f002";
font-family: FontAwesome;
}
.container {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<input type="text" placeholder="search...">
<label></label>
</div>
You can achive this with absolute and relative positioning, and FontAwesome.
To use FA, include this:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
In the <head>. The HTML will be as follows:
<div class="data-path-container">
<input class="data-path" placeholder="From where to grab the data">
<div class="data-path-icon"><i class="fa fa-search"></i></div>
</div>
We'll give .data-path-container relative positioning, and width. For the example, the width will be: calc(30vw + 40px).
.data-path-container {
width: calc(30vw + 40px);
position: relative;
}
The input doesn't need much styling either; Just height, padding and border / border-radius to give it a nice curved edge.
.data-path-input {
height: 1.2em;
width: 30vw;
padding: 5px 30px 5px 5px;
border-radius: 5px;
border: 1px solid #DEDEDE;
}
The .data-path-icon will require quite a lot of CSS:
.data-path-icon {
/* background-color, color, height and width */
width: 30px;
height: 1.5em;
background-color: grey;
color: white;
/* positioning */
position: absolute;
right: 0;
top: 1px;
/* centering the search icon */
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
/* curved edge and hover effect */
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.data-path-container {
width: calc(30vw + 40px);
position: relative;
}
.data-path-input {
height: 1.2em;
width: 30vw;
padding: 5px 30px 5px 5px;
border-radius: 5px;
border: 1px solid #DEDEDE;
}
.data-path-icon {
width: 30px;
height: 1.5em;
background-color: grey;
position: absolute;
right: 0;
top: 1px;
color: white;
display: flex;
border-radius: 0 5px 5px 0;
flex-direction: column;
justify-content: center;
text-align: center;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="data-path-container">
<input class="data-path-input" placeholder="From where to grab the data">
<div class="data-path-icon"><i class="fa fa-search"></i></div>
</div>
Add a background to your button style
background: #ccc url('path/to/your/image') no-repeat center center;