I am trying to center a button in a fluid container with 100% vertical height and give it an offset from the bottom of the screen. I am pretty much there, however, the button is offset from the left and not correctly centered. See the example in my code snippet.
I am not sure what I am missing here... how can I correctly center the button to the center of the screen?
In my site code I have an image as my background in the main fluid container, hence why I have background size: cover; etc in my css.
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
position: absolute;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
add
left: 50%;
transform: translateX(-50%);
to .centered-button element for center that.
this link is complete answer for centering with position
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
position: absolute;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
and you can use flex to do that simply .
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.centered-button {
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
You should implement bootstrap alignment instead of using regular css, Try Flex containers. See my example below:
<button type="button" class="d-flex justify-content-center btn btn-primary">Primary</div>
Adding d-flex justify-content-center will horizontally align your element. To align the element vertically have a look at Vertical alignment
.main-div {
background-color: pink;
min-height: 100vh;
line-height:100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
vertical-align: middle;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
/*You need to use display:flex; property of css on parent div of button to align it centerly regardless of any device you view it on
along with display: flex; you need these two property also
- align-items:center; ( this aligns button in center vertically )
- justify-content:center; ( this aligns button in center horizontally )
using positon absolute will not center the button on every device. as well as using left 50% will also not work for every device */
.main-div {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background-color: pink;
min-height: 100vh;
line-height:100vh;
min-width: auto;
position: relative;
}
.centered-button {
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
Related
I´m having trouble with animating a dropdown menu with css. I need it to work with css3 and not jQuery or javascript. I've added all the rules neccessary but still the opacity tag inside my tranistion tag in my css appears like a normal word and is not marked like the other tags and so the effect dont works.
body {
background-color: rgb(20, 20, 20);
margin: 0px;
}
.menu {
height: 100vh;
display: flex;
align-items: center;
}
.menu-item {
color: aliceblue;
font-size: clamp(2rem, 7vw, 7rem);
font-family: 'Orbitron', sans-serif;
display: block;
text-decoration: none;
padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
transition: opacity 400ms ease;
}
.menu-items {
margin-left: 100px;
position: relative;
z-index: 2;
}
.menu-items:hover>.menu-item {
opacity: 0.3;
}
.menu-items:hover>.menu-item:hover {
opacity: 1;
}
.menu-background-pattern {
height: 100vh;
width: 100vw;
background-image: radial-gradient( rgba(2255, 255, 255, 0.1) 9%, transparent 9%);
background-position: 0% 0%;
background-size: 12vmin 12vmin;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rahim's Portfolio Page</title>
<link rel="stylesheet" href="style.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=Orbitron:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<div class="menu-items">
Projects
Resume
Testemony
Kontakt
</div>
<div class="menu-background-pattern"></div>
</div>
</body>
</html>
I created a submit button using bootstrap but I want to place it where the arrow pointing but I no matter what I write the position doesn't change it's like the button stick to the position and I can't reposition it
how can I place it to be there?
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
If you're able to change the HTML, here's a way:
Wrap your button inside another div:
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
Then set the margin-left on that wrapper:
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
Check this snippet for the result.
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question"></span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
I just define a button-container class and use flex & justify:
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
.button-container {
display: flex;
justify-content: start;
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-container">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
I have this image of a long line going over 2 sections in my design file and I would like to translate that with CSS. How should I go about this? should I create a layer that encapsulates both sections with an absolute position?
* {
--my-orange: rgb(255, 166, 0);
}
.timeline-container {
margin-left: 2em;
}
.timeline-container .timeline {
width: 5px;
height: 100vh;
background: var(--my-orange);
}
.checkpoint {
border: 3px solid var(--my-orange);
padding: 0.5rem;
width: 2rem;
border-radius: 2rem;
text-align: center;
transform: translateX(-1.5rem);
background: white;
position: relative;
top: calc(20vh * var(--i))
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="checkpoint" style="--i: 0;">0%</div>
<div class="checkpoint" style="--i: 1;">5%</div>
<div class="checkpoint" style="--i: 2;">10%</div>
<!--more divs-->
</div>
</div>
</body>
</html>
In the given code background-clip: padding-box; is working but the background-clip: content-box; isn't working. Please tell me what is wrong here. I found that padding must be there for the background-clip property to work and I have added the padding as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.temp {
width: 400px;
height: 300px;
background-color: rgb(255, 153, 141);
background-clip: content-box;
border: 9px dotted blue;
margin: 20px;
float: left;
text-align: center;
/* background-clip: padding-box; */
}
.temp h3 {
padding-top: 90px;
}
</style>
<body>
<div class="temp">
<h3>Hasnain</h3>
</div>
<div class="temp">
<h3>Zain</h3>
</div>
<div class="temp">
<h3>brothers</h3>
</div>
</body>
</html>
Your code is working, you just added the padding to the wrong element ".temp h3" instead of ".temp"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.temp {
width: 400px;
height: 300px;
background-color: rgb(255, 153, 141);
background-clip: content-box;
border: 9px dotted blue;
margin: 20px;
float: left;
text-align: center;
/* background-clip: padding-box; */
}
.temp {
padding-top: 90px;
}
</style>
<body>
<div class="temp">
<h3>Hasnain</h3>
</div>
<div class="temp">
<h3>Zain</h3>
</div>
<div class="temp">
<h3>brothers</h3>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a class="btn btn-primary"><i class="fa fa-angle-left"></i> 1</a>
<a class="btn btn-primary">2 <i class="fa fa-angle-right"></i></a>
</body>
</html>
I have two bootstrap buttons with icons <,>.I wanna make them together like one button and put a vertical separator '|' like this below
To achieve this I tried different things but couldn't get the desired one.
You can try the vertical line by using :before and positioning it to the place.
I've created a little example, it might help you.
HTML
<div class="button-wrapper">
<button><1</button>
<button class="last-btn">2></button>
</div>
CSS
.button-wrapper{
display: flex;
}
.last-btn:before {
content: '';
position: absolute;
top: 50%;
height: 50%;
background: white;
width: 1px;
left: 0px;
transform: translateY(-50%);
}
button{
padding: 5px 10px;
border: 0;
position: relative;
background: skyblue;
color: #ffffff;
}
https://codepen.io/ammar-d/pen/XWderxm
You could use Button-Groups and CSS-Pseudo-Elements like :after
It's not perfect but I think it should do the trick :-)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn-group > .btn{ position:relative;}
.btn-group > .btn:after{
position:absolute; right:0; top: 50%;
transform:translateY(-50%);
content:''; width: 1px; height:1.25em;
background-color:currentColor;
}
.btn-group > .btn:last-child:after{ content:none;}
</style>
</head>
<body>
<div class="btn-group">
<a class="btn btn-primary"><i class="fa fa-angle-left"></i> 1</a>
<a class="btn btn-primary">2 <i class="fa fa-angle-right"></i></a>
</div>
</body>
</html>
Some flexbox and psuedo-element magic make it happen :-)
.wrapper {
display: flex;
overflow: hidden;
border-radius: 5px;
font-family: Helvetica;
color: white;
width: 80px;
position: relative;
}
.wrapper::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 1px;
background: white;
height: 60%;
}
.btn {
background: #0a48ff;
padding: 7px;
width: 50%;
text-align: center;
cursor: pointer;
transition: background 0.2s;
}
.btn:hover {
background: #0a48ffdd;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="btn btn-left"><i class="fa fa-angle-left"></i> 1</div>
<div class="btn btn-right">2 <i class="fa fa-angle-right"></i></div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.left {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
}
.right {
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
.separator {
display: inline-block;
color: #d8d8d8;
vertical-align: middle;
border: 1px solid transparent;
padding: 0.375rem 0.15rem;
font-size: 1rem;
line-height: 1.5;
background-color: #007bff;
}
</style>
</head>
<body>
<a class="btn btn-primary left"><i class="fa fa-angle-left"></i> 1</a
><span class="separator">|</span
><a class="btn btn-primary right">2 <i class="fa fa-angle-right"></i></a>
</body>
</html>
Here is another solution.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.left {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
}
.right {
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
.left::after {
content: "";
position: absolute;
top: 20%;
left: 50%;
height: 60%;
background: rgba(255, 255, 255, 0.6);
width: 2px;
margin-left: -1px;
z-index: 10;
}
.wrap {
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrap">
<a class="btn btn-primary left"><i class="fa fa-angle-left"></i> 1</a
><a class="btn btn-primary right">2 <i class="fa fa-angle-right"></i></a>
</div>
</body>
</html>