I want to radius the border of the card but the code does not work properly..
Here is the code I used.
.card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border-radius: 30px;
width: 100%;
}
Add border border:2px solid black;
.card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border:2px solid black;
border-radius: 30px;
width: 100%;
}
if you want to make more space between text and border you can add padding to this code:
card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border-radius: 30px;
width: 100%;
border: 1px solid #000;
}
Related
My question makes more sense with a picture.
.instagram {
color: #E44060;
font-size: 1.5em;
padding: 12px 14px 12px 14px;
border: 2px solid #E44060;
border-radius: 7px;
&:visited {
color: inherit;
}
&:hover {
color: $tertiary-color;
background-color: #E44060;
transition: all .25s ease 0s;
}
&:active {
background-color: #B2334C;
border: 2px solid rgba(0,0,0,0.2);
box-shadow: inset 4px 4px rgba(0,0,0,0.2), inset -4px -4px rgba(0,0,0,0.2);
}
}
How do I make it so the corners of the box-shadow don't overlap making the opacity 0.4? Should I try to create a button using a different method?
Use boxshadow and transform to create the push button effect
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<button class="button">Instagram</button>
Rather than having 2 box-shadows, you could use the "spread" feature (the 4th number after "inset").
box-shadow: inset 0 0 0 4px rgba(0,0,0,0.2);
https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp
I have a div that I've got that's circular using border-radius: 50% what I also want to achieve is mimicking something I've already seen implemented on hover.
spacing between the border and the div.
I've tried adding padding: 5px to the hover but it doesn't create a border that's not on the div.
Code
#sub-section .content .icon-div {
background-color: rgba(204, 202, 202, 0.25);
border-radius: 50%;
width: 90px;
height: 90px;
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 13%;
margin-bottom: 2em;
transition: all ease .3s;
}
#sub-section .content .icon-div:hover {
border: 1px solid #f6653c;
background-color: #f6653c;
padding: 5px;
transition: all ease .3s;
}
Here's a quick example using an inset box-shadow, as it's less likely to mess with your layout than animating padding:
(Bare in mind, it's not true transparency, the white inner circle is a set colour, which may or may not fit your need)
#example{
display: block;
width: 100px;
height: 100px;
color: #FFF;
text-align: center;
line-height: 100px;
background-color: #f6653c;
border: 2px solid #f6653c;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
transition: box-shadow 0.2s linear;
}
#example:hover{
box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}
<div id="example">Hover me</div>
You could use a radial gradient:
div {
width: 120px;
height: 120px;
border-radius:50%;
border:1px solid #FA532A;
}
.simple-radial {
background: radial-gradient(#FA532A 54px, rgba(204, 202, 202, 0.25) 2px, white 4px);
}
<div class="simple-radial"></div>
How I can add border to shadow?
I wan't make something similar to this
Here's my code:
.btn {
margin: 10px;
}
.btn:active span {
transform: translate(0, 6px);
box-shadow: 0 -5px 0 blue;
transition: 0.3s;
}
.btn {
display: inline-block;
border-radius: 6px;
box-shadow: 0 6px 0 blue;
}
.btn span {
display: inline-block;
color:white;
padding: 10px 20px;
background: #3194c6;
border-radius: 4px;
transition: .2s ease-in-out;
}
Here's my jsfiddle
Use multiple shadows:
.btn {
margin:10px;
display: inline-block;
border-radius: 6px;
box-shadow: 0px 0px 0px 2px #000,
0 6px 0 red,
0px 6px 0px 2px #000,
0px 0px 0px 2px #000;
}
.btn span {
display: inline-block;
color: white;
padding: 10px 20px;
background: #3194c6;
border-radius: 4px;
transition: .2s ease-in-out;
}
<span>Press this!</span>
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 know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>