I don't understand why I can't get this to work easily. Trying to make a simple CSS button for a link with a white line around the text. I want the red box to change to #1f1f1f when I hover over but I'm having issues with it delaying depending when I hover what part.
BUTTON TEXT
font-size: 1.3em letter-spacing: .3em
BOX
10px padding (between text and outline),
1px #ffffff border,
5px padding (between outline and main box),
background: #be0922
hover
background: #1f1f1f
normal red button (background:#be0922;)
hover black button (background:#1f1f1f;)
I might try just making the <a> the full red button, with a <span> inside with a border.
HTML:
<a href="#" class="fancy-button">
<span>Read More about our services</span>
</a>
CSS:
.fancy-button {
background: #be0922;
font-size: 1.3em;
letter-spacing: .3em;
text-align: center;
padding: 10px;
box-sizing: border-box;
display: inline-block;
text-decoration: none;
}
.fancy-button span {
color: white;
text-transform: uppercase;
border: 1px solid white;
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
}
.fancy-button:hover {
background: #1f1f1f;
}
See jsfiddle with this example working:
http://jsfiddle.net/3gh9qen2/
there is a few ways with border, box-shadow and outline ....
button {
line-height: 1.3;
padding: 15px;
background: red;
border: none;
color: white;
vertical-align: middle;
margin: 5px;
box-sizing: border-box;
}
.outline {
outline: solid 1px;
outline-offset: -5px;
}
.outlineborder {
outline: 5px solid red;
border: 1px solid white;
}
.shadow {
box-shadow: 0 0 0 5px red, inset 0 0 0 1px white;
}
.border {
box-sizing: border-box;
border: 5px solid transparent;
box-shadow: inset 0 0 0 1px white;
}
.shadowborder {
box-shadow: 0 0 0 5px red;
border: 1px solid white;
margin: 5px;
}
button:hover {
background: #1f1f1f
}
.outlineborder:hover {
outline-color: #1f1f1f
}
.shadow:hover {
box-shadow: 0 0 0 5px #1f1f1f, inset 0 0 0 1px white;
}
.shadowborder:hover {
box-shadow: 0 0 0 5px #1f1f1f;
}
<button class=none>101 simple reset to start from</button>
<button class=outline>simple reset & outline offset</button>
<button class=outlineborder>simple reset & outline + border</button>
<button class=shadow>simple reset & shadow</button>
<button class=shadowborder>simple reset & border shadow </button>
<button class=border>simple reset & shadow border</button>
p.s. I would have used your markup if it was posted
Related
I have an element with inline background color made with box-shadox, like this:
.overlay {
display: inline;
background-color: red;
box-shadow: 10px 0 0 red, -10px 0 0 red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
However, since the text also needs a border and border radius, I added an inner span.
As a consequence I need to add more box-shadow to top and bottom, but how?
I tried adding more layers to the box-shadow like this:
box-shadow: 10px 0 0 red, -10px 0 0 red, 0 10px 0 red, 0 -10px 0 red;
but it doesn't look good. How can I solve this?
You can use spread property in box-shadow to display shadow around every 4 edges of the element.
.overlay {
display: inline-block;
background-color: red;
box-shadow: 0 0 0 20px red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
display:inline-block;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
And there are tools for box-shadow that you can use to achieve the best form you want.
Please add use display: inline-block for displaying top and bottom box shadow. it will work
.overlay {
display: inline-block;
background-color: red;
box-shadow: 2px -1px 0 10px red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
display: inline-block;
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
margin:2px;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
Is this a box shadow or an outline? I'm confused because outlines can't have radius property and box shadows have blur effect.
That can be a combination of border and box-shadow and outline: none.
I have added the border and box-shadow to default state, if needed we can move that to :focus
body {
padding: 10px;
zoom: 250%;
}
.custom {
width: 100%;
height: 30px;
border-radius: 5px;
border: 2px solid #0000ff;
box-shadow: 0 0 0 2pt rgb(0 0 255 / 30%);
}
.custom:focus {
outline: none;
}
<input type="text" class="custom">
Use an outline with a rgba color on an input with a border radius:
input {
border: 1px solid #ae11fc;
border-radius: 0.5rem;
font-size: 1rem;
height: 2rem;
}
input:focus {
outline: #ae11fc44 solid 0.2rem;
}
Checkout out this fiddle
You can achieve the required styling by adding the following properties to your input style. You can play around it here: https://codepen.io/taleyamirza/pen/ExmzYJr
input:focus {
outline-color: #6c8afc;
border-color: #9ecaed;
box-shadow:0 0 10px #6c8afc;
-moz-box-shadow: 0px 0px 4px #6c8afc;
-webkit-box-shadow: 0px 0px 4px #6c8afc;
}
Look at the edges. I been trying to fix this for two days now, throw at it everything everywhere. The problem is when the scrollbar appears this happens. Note it's the same when scrollbar is unstyled. What do you think?
Styled component code:
padding: 6px;
resize: none;
font-family: inherit;
font-size: inherit;
background-color: #e4e4e4;
color: black;
outline: none;
border: none;
&:focus {
outline: none;
border: none;
box-shadow: 0 0 0 2px #2d8cff;
background-color: ${Colors.primary};
}
& {
::-webkit-scrollbar {
width: 16px;
cursor: initial;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 10px 10px #c1c1c1;
border: solid 4px transparent;
cursor: initial;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 10px 10px #7d7d7d;
}
}
I fixed this using box-sizing: border-box and using border instead of boxshadow. In border then has to be specified in not focus state too, to the same color as background.
Here's what i want to accomplish:
As you can see, there's a small border at the bottom, i've tried to add border-bottom: 1px solid #c1ad6f but it results to:
Border is not fully filled cause of radius.
.btn {
background: #d5c289;
border-bottom: 6px solid #c1ad6f;
font-weight: 500;
font-size: 1.125rem;
padding: 1.25rem;
border-radius: 4px;
}
<a class="btn" href="#form" role="button">Enroll</a>
You may consider box-shadow instead of border to achieve this in a better way:
.box {
display: inline-block;
margin: 10px;
height: 100px;
width: 200px;
background: #d5c289;
box-sizing:border-box;
border-radius: 0 0 20px 20px;
}
.shadow {
box-shadow: 0 -10px 0 0 #c1ad6f inset;
animation: anime 2s infinite linear alternate;
}
.border {
border-bottom: 10px solid #c1ad6f;
animation: anime-alt 2s infinite linear alternate;
}
#keyframes anime {
from {box-shadow: 0 -1px 0 0 #c1ad6f inset;}
to {box-shadow: 0 -30px 0 0 #c1ad6f inset;}}
#keyframes anime-alt {
from {border-bottom: 1px solid #c1ad6f;}
to {border-bottom: 30px solid #c1ad6f;}}
<div class="box shadow">
Good one with box-shadow
</div>
<div class="box border">
Not good with border
</div>
This is simple trick to make border rounded using box-shadow. it will
exactly giving the output what you want.
.btn-bordered {
background: #17aa56;
color: #fff;
border-radius: 15px;
box-shadow: 0 10px #119e4d;
padding: 25px 60px 25px 90px;
}
.btn-block {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: #ddd;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: Capitialize;
letter-spacing: 1px;
font-weight: 700;
position: relative;
overflow:hidden;
}
<button class="btn-bordered btn-block" type="button">Bottom Rounded Button</button>
#AlexanderKim, you could increase border-bottom. like this: border-bottom: 5px solid #c1ad6f;. I made this fiddle: jsfiddle.net/bektkdnz but increased padding so it was easier to see
I'm trying to use box shadow to create a border around 2 html elements. I cannot user box-shadow on the button element as the performance in Android is very poor, it needs to be on each inner element. I also cannot user border proterty as again the performance is poor on some android devices. As you can see on the jsfiddle, the left and right "borders" are thicker than the top and bottom.
The solution below uses box shadow on the top, left and bottom of the em element and on the top, right and bottom of span element.
How do I make the "border" look even?
<button class="button">
<em></em>
<span class="hidden" style="display: inline;">698</span>
</button>
.button {
background: #00bdf2;
border-color: white;
border-width: 0.1rem;
border-style: solid;
float: right;
height: 3rem;
margin-right: 2.4rem;
margin-top: 0.9rem;
overflow: visible;
padding: 0;
position: relative;
z-index: 101;
border: 0;
}
input, button {
border-radius: 0;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.button em {
background-position: center center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
display: inline-block;
float: left;
height: 100%;
padding: 0 1rem;
width: 1.5rem;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset .1rem 0 0 .1rem #000;
}
.button > span {
background: #ffcd00;
color: #444444;
float: right;
height: 100%;
font-family: Arial;
font-size: 1.4rem;
line-height: 3rem;
padding: 0 1rem;
text-align: center;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset -.1rem 0 0 .1rem #000;
}
By moving the h-shadow to .1rem and -.1rem you are pushing the shadow left (or right) by that value, so by design, this will reveal more of the shadow on that sides.
Removing the value and having it as 0 will fix this, but will also show the shadow of the side you are trying to hide it from so this will not create the effect you are after.