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
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>
I want to switch button hover effect between transparent background with solid color background, but so far i ruin it :(
If someone can help me it will be great, thank you Stackoverflow.
/*################ Test Button ##########*/
.tesbtn {
color: #EE6533;
border:solid 2px #EE6533;
border-radius: 6px;
box-shadow: 0 0 20px #EE6533;
padding: 9px 9px;
font-size: 14px;
display: inline-block;
width: 130px;
margin: 10px;
float: center;
font-family: 'Nunito Sans', sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 0 0 5px #EE6533;
transition-duration: 0.4s;
-webkit-transition-duration: all 0.4s;
}
.tesbtn:hover {
background: #EE6533;
color: #fff;
box-shadow: 0 12px 16px 0 rgba(238,101,51,0.24),0 17px 50px 0 rgba(238,101,51,0.19);
}
.tesbtn:last-child {
margin-left: 5px;
}
<br/><br/>
<div style="text-align: center;">
<a class='tesbtn' href='#' target='_self'>Test</a>
<a class='tesbtn' href='#' target='_self'>Test</a>
</div>
if you want to make background transparent, you can use opacity:
try using the transform: opacity(); property
I am trying to create a button that shows a loading spinner when waiting for a response. But there is some weird things going on which I do not understand at all.
I have the following HTML with a bunch of CSS:
<button type="submit" disabled="true" class="btn btn-blue btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
If you comment out the spinner element, then the "Update profile" aligns itself in the center even tho I did not ask it to.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<!--<div class="btn-loading-spinner"></div>-->
</button>
But when the spinner element is there it suddently goes to the top. I have no idea what's going on.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
The content of a button element are vertically aligned to the middle.
When you only have .btn-loading-text, that element is 16px tall, and the button is 38px tall, so .btn-loading-text is aligned to the middle.
However, when you also include .btn-loading-spinner, which is 38px tall (including borders and margins), the content of the button is as tall as the tallest of the elements, so 38px. So the alignment to the middle is not noticeable.
If you want to align each element to the middle, instead of aligning the content as a whole, you can use display: inline-block instead of float: left, and vertical-align: middle.
.btn-loading-text, .btn-loading-spinner {
float: none; /* Initial value */
display: inline-block;
vertical-align: middle;
}
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text, .btn-loading-spinner {
display: inline-block;
vertical-align: middle;
}
.btn-loading-text {
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
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.
I'm working on my navigation and I've added an effect that when you hover over a link, a blue border is added to the bottom. It works, but the only problem I'm having is that when you hover over a link, the border pushes all the other elements on the page down 3 pixels (the size of the border).
If anyone could clue me in on how to fix this it would be greatly appreciated. Here's the relevent code:
HTML
<div id="nav" class="wrapper">
<div class="site-navigation">
About
Work
<div class="site-title">Noelle Devoe</div>
Blog
Contact
</div>
</div>
CSS
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
.site-navigation {
text-align: center;
overflow:hidden;
}
.site-navigation a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
}
.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
One easy fix is to add a transparent border when the element isn't being hovered.
Add border-bottom: 3px solid transparent; to .site-navigation a.
.site-navigation a {
font-family:'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82, 82, 82);
border-bottom: 3px solid transparent;
}
How about adding below CSS:
border-bottom: 3px solid transparent;
to
.site-navigation a
Simple way to solve the hover problem!
<div class="main">
<div class="box"></div>
</div>
.main{
height: 205px;
width: 405px;
}
.box{
height: 200px;
width: 400px;
border:1px solid rgb(0, 0, 0);
transition:
0.3s;
}
.box:hover{
margin-left: 5px;
margin-bottom: 5px;
box-shadow: -5px 5px black;
}