Related
Is there a way to create a dashed border with two alternating colours in CSS?
.twoColourBorder {
border: 2px dashed red, blue;
}
Edit 1
Perhaps stacked dashed borders (white, red, white, blue)?
Edit 2
Ideally not; however, should I consider a border img?
Edit 3
Leaning toward a gradient solution. Still struggling though.
Edit 4
Dylan pointed out below that perhaps stroke-dasharray could work. On it.
Built on Yadab's answer, adding a pseudo element to fix the vertical border.
Basically you create a line with repeating-linear-gradient and set it to border-image.
:root {
--border-size: 2px;
--box-width: 36em;
--box-height: 8em;
--dash-size: 1em;
}
.box,
.box::after {
height: var(--box-height);
width: var(--box-width);
border: solid;
}
.box {
border-image: repeating-linear-gradient( to right, red 0, red var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
border-image-slice: 16;
border-image-width: var(--border-size) 0;
}
.box::after {
content: "";
top: 0;
position: absolute;
border-image: repeating-linear-gradient( to bottom, blue 0, blue var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), red calc(var(--dash-size) * 2), red calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
border-image-slice: 16;
border-image-width: 0 var(--border-size);
}
<div class="box"></div>
.boxborder-me {
box-shadow: 0 0 0 5px red;
outline: dashed 5px blue;
height: 100px;
}
<div class="boxborder-me"></div>
This should help you.
.box {
padding: 1rem;
border: 5px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
#58a 0, #58a 3em, transparent 0, transparent 4em);
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
<div class="box" />
I know it isn't perfect and a better answer most definitely exists! (I am strapped for time to answer this) Treat this more a proof of concept that you can get the look your after by using the following:
#multiColor {
height: 100px;
width: 340px;
border: solid 5px;
border-image: url('../../../assets/images/border.png') 10 / 10px round;
}
Here is the image I edited in photoshop:
EDIT
After more research I started researching svg stroke-dasharray and have come up with something that might help us get to a final solution:
https://jsfiddle.net/wtcmpx98/52/
<svg viewbox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect class="red"/>
<rect class="blue"/>
<rect class="white"/>
<!--<rect class="white-2"/>-->
</svg>
svg {
top: 10px;
left: 10px;
fill: none;
width: 500px;
height: 500px;
}
.red,
.blue,
.white {
x: 10px;
y: 10px;
height: 150px;
width: 150px;
}
.red {
stroke: red;
stroke-width: 5;
stroke-dasharray: 0,0,0;
}
.white {
stroke: white;
stroke-width: 6px;
stroke-dasharray: 5,5,5;
}
.blue {
stroke: blue;
stroke-width: 5;
stroke-dasharray: 10,10,10;
}
.white-2 {
stroke: white;
stroke-width: 6px;
stroke-dasharray: 15,15,15;
}
The following demo uses background: linear-gradient() on a total of 16 <div> positioned absolute within a relatively positioned <div>. It's a little rough -- the corners are not perfect when resized.
Demo
Drag the bottom right corner of rectangle to resize
* {
padding: 0;
margin: 0;
}
.box {
position: relative;
width: 30vw;
height: 50vh;
padding: 4px;
margin: 25vh auto;
resize: both;
overflow: auto;
}
.box div {
position: absolute;
}
.n {
width: 25%;
height: 4px;
background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 10% 100%;
top: 0;
}
.e {
width: 4px;
height: 25%;
background: linear-gradient(to bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 100% 10%;
right: 0;
}
.s {
width: 25%;
height: 4px;
background: linear-gradient(to left, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 10% 100%;
bottom: 0;
}
.w {
width: 4px;
height: 25%;
background: linear-gradient(to top, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%);
left: 0;
}
.r1 {
right: 0
}
.r2 {
right: 25%
}
.r3 {
right: 50%
}
.r4 {
right: 75%
}
.b1 {
bottom: 0
}
.b2 {
bottom: 25%
}
.b3 {
bottom: 50%
}
.b4 {
bottom: 75%
}
.l1 {
left: 0
}
.l2 {
left: 25%
}
.l3 {
left: 50%
}
.l4 {
left: 75%
}
.t1 {
top: 0
}
.t2 {
top: 25%
}
.t3 {
top: 50%
}
.t4 {
top: 75%
}
<div class='box'>
<div class='n r1'></div>
<div class='n r2'></div>
<div class='n r3'></div>
<div class='n r4'></div>
<div class='e b1'></div>
<div class='e b2'></div>
<div class='e b3'></div>
<div class='e b4'></div>
<div class='s l1'></div>
<div class='s l2'></div>
<div class='s l3'></div>
<div class='s l4'></div>
<div class='w t1'></div>
<div class='w t2'></div>
<div class='w t3'></div>
<div class='w t4'></div>
</div>
I want to change the text color and background color of the links when hovered? The background color changes but the text does not change color
CSS:
.choice-container {
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
color: rgb(255, 238, 0);
background-color: rgb(0, 0, 0);
border: 0.1rem solid rgb(255, 238, 0);
}
.choice-container:hover {
cursor: pointer;
transform: translateY(-0.1rem);
transition: transform 150ms;
color: rgb(0, 0, 0) !important;
background-color: rgb(255, 238, 0);
border: 0.1rem solid rgb(255, 255, 255);
box-shadow: 0 0.4rem 2.4rem 0 rgb(255, 238, 0);
}
It seems to be working without any error.
.choice-container {
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
color: rgb(255, 238, 0);
background-color: rgb(0, 0, 0);
border: 0.1rem solid rgb(255, 238, 0);
}
.choice-container:hover {
cursor: pointer;
transform: translateY(-0.1rem);
transition: transform 150ms;
color: rgb(0, 0, 0) !important;
background-color: rgb(255, 238, 0);
border: 0.1rem solid rgb(255, 255, 255);
box-shadow: 0 0.4rem 2.4rem 0 rgb(255, 238, 0);
}
Google
Here, it is in jsfiddle: https://jsfiddle.net/kt1wzv08/
When not hovering:
When hovering:
I have a code that obviously doesn't work. It is a gradient after the body element. Gradient was working before I decided to move colors to :root. And here is this problematic code:
:root {
--primary: #222;
--primary-rgb: 31, 31, 31;
--color-888: #888;
--color-888-rgb: 136, 136, 136;
--color-1f1: #1f1f1f;
--color-white-button: #fff;
--color-b8b: #b8b8b8;
--color-f21: #F23D3F;
--pre-bg-rgb: 31, 31, 31;
--scrollbar-hover: #4a4a4a;
--scrollbar-active: #383838;
--fade-rgb: 34, 34, 34;
}
[data-theme="dark"] {
--primary: #fff;
--primary-rgb: 255, 255, 255;
--color-888: #000;
--color-888-rgb: 0, 0, 0;
--color-1f1: #ccc;
--color-white-button: #000;
--color-b8b: #d4d4d4;
--color-f21: #f52a2c;
--pre-bg-rgb: 0, 0, 0;
--scrollbar-hover: #363636;
--scrollbar-active: #454545;
--fade-rgb: 255, 255, 255;
}
body::after {
content: '';
position: fixed;
bottom: 0;
pointer-events: none;
width: 100%;
height: 30px;
background: -webkit-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: -moz-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: -o-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: -ms-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
}
Why isn't it working?
Here's a link to the demo: https://codepen.io/MAJO-SEARCH/project/editor/XEWoVE
You are using a very old syntax that is no more needed and doesn't work with CSS variable.
Simply do like below. Gradient is now supported everywhere and no need vendor prefixes.
:root {
--primary: #222;
--primary-rgb: 31, 31, 31;
--color-888: #888;
--color-888-rgb: 136, 136, 136;
--color-1f1: #1f1f1f;
--color-white-button: #fff;
--color-b8b: #b8b8b8;
--color-f21: #F23D3F;
--pre-bg-rgb: 31, 31, 31;
--scrollbar-hover: #4a4a4a;
--scrollbar-active: #383838;
--fade-rgb: 34, 34, 34;
}
[data-theme="dark"] {
--primary: #fff;
--primary-rgb: 255, 255, 255;
--color-888: #000;
--color-888-rgb: 0, 0, 0;
--color-1f1: #ccc;
--color-white-button: #000;
--color-b8b: #d4d4d4;
--color-f21: #f52a2c;
--pre-bg-rgb: 0, 0, 0;
--scrollbar-hover: #363636;
--scrollbar-active: #454545;
--fade-rgb: 255, 255, 255;
}
body::after {
content: '';
position: fixed;
bottom: 0;
pointer-events: none;
width: 100%;
height: 30px;
background: linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
I have tried updating border-radius to make square from circle but size is very small. I want to increase size of each square. Width & Height changes aren't making any difference.
If someone can help in making it usable or provide similar code with big boxes.
Let me know if any further details needed.
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 100%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 20px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
}
<head>
<meta charset="UTF-8"/>
<title>Responsive Checkout Progress Bar</title>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
<h1>Responsive Checkout Progress Bar</h1>
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">Possible candidate</li>
<li class="previous visited">Forwarded to manager</li>
<li class="active">Phone screen</li>
<li class="next">Interview</li>
<li class="">Complete</li>
<li class="">Cancelled</li>
</ul>
</div>
</body>
Let's take a look at the rules, you will find the following rule:
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
If you change width and height of the previous rule nothing will happen if
it is displayed on a browser because you have another rule for the same selector inside a media query that is to be applied on screens with a width greater than 800px :
#media all and (min-width: 800px) {
...
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
...
}
The last rule is overriding the first rule because is inside a media query and you are probably displaying the file in a browser that is more than 800px. If you change the height and width of the second rule you'll see the changes. If the file is displayed in a the device with width lower than 800px then you the rule that will have effect is the first one.
I suggest you learn about media queries and to learn about using Developer Tools to debug code.
On small screen you need to adjust your #media all and (min-width: 800px) { ... ul.checkout-bar li:before ... } class's properties and on large screen you need to adjust ul.checkout-bar li:before,
properties that you need to adjust are: height, width, line-height, top
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 100%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 20px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
margin-top: 26px;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 0px;
line-height: 70px;
height: 70px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: -80px;
width: 70px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 70px;
left: 40%;
line-height: 70px;
position: absolute;
top: -80px;
width: 70px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
}
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
<h1>Responsive Checkout Progress Bar</h1>
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">Possible candidate</li>
<li class="previous visited">Forwarded to manager</li>
<li class="active">Phone screen</li>
<li class="next">Interview</li>
<li class="">Complete</li>
<li class="">Cancelled</li>
</ul>
</div>
I really liked the look & feel of btn btn-primary buttons in bootstrap 2 . I'm using bootstrap 3, and I don't like the flat look. I tried adding bootstrap-theme.css, which came long with bootstrap 3. But still its not the same.
Bootstrap 2 button:
Bootstrap 3 button:
As #AzDesign suggested, you want to copy the relevant css from BS 2 and use this as an override in your custom CSS. Here's a working example of BSv2 primary button styling in BS v3:
http://jsfiddle.net/panchroma/39zmy/
Good luck!
HTML
<button type="button" class="btn btn-primary">Primary</button>
CSS
.btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover,
.btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: #0044cc;
*background-color: #003bb3;
}
.btn-primary:active,
.btn-primary.active {
background-color: #003399 \9;
}