I have problem with adding transition on gradient. I know that its impossible to transition gradient and I found a solution. https://keithjgrant.com/posts/2017/07/transitioning-gradients/
The background-image should be revealed in time. This button have background-color: black; and should change on gradient with hover. Any idea how can I make this on a hover pseudoclass?
.register {
float: right;
padding: 0 20px;
text-transform: uppercase;
}
.register a {
border: 1px solid white;
border-radius: 4px;
}
.register a:hover {
background-image: linear-gradient( to bottom right, rgb(40, 40, 40), rgb(60, 60, 60));
}
<li class="register">register</li>
You could try doing a transition from white to black (if, by your suggested code snippet, that is what you'd like).
<a class="btn btn-1">Hover me</a>
Accompanied by CSS:
.btn {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background: linear-gradient(90deg, var(--c1, #fff), var(--c2, #333) 51%, var(--c1, #000)) var(--x, 0)/ 200%;
color: white;
}
.btn:hover { --x: 100%; }
.btn-1 {
--c1: #fff;
--c2: #000;
}
See my fiddle for more
https://jsfiddle.net/80f7t1ej/
Related
I am trying to achieve the below design! I have managed to achieve the border radius with gradient border but if i try to use -webkit-background-clip & -webkit-text-fill-color for gradient text then the border radius doesn't work and the whole button gets the gradient color.
I am using this as reference for gradient text and attaching the code for gradient border
.btn {
background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
border-radius: 40px;
box-sizing: border-box;
color: #00a84f;
display: block;
font: 1.125rem 'Oswald', Arial, sans-serif;
/*18*/
height: 80px;
letter-spacing: 1px;
margin: 0 auto;
padding: 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 264px;
z-index: 2;
}
.btn:hover {
color: #fff;
}
.btn span {
align-items: center;
background: #e7e8e9;
border-radius: 40px;
display: flex;
justify-content: center;
height: 100%;
transition: background .5s ease;
width: 100%;
}
.btn:hover span {
background: transparent;
}
<a class="btn" href="#">
<span>Click Here!</span>
</a>
Any kind of help would be greatly appreciated! Please feel free to give some suggestions. TIA
I will consider this previous answer to build the rounded gradient using pseudo element so that you can use background-clip:text on the main element. I have used the mask version by you can also consider the SVG one:
.btn {
--r:40px; /* radius */
--b:5px; /* border width */
background: linear-gradient(to right, #006175 0%, #00a950 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
border-radius: var(--r);
display: flex;
align-items: center;
justify-content: center;
font: 1.5rem 'Oswald', Arial, sans-serif;
height: 80px;
margin: 0 auto;
position: relative;
z-index:0;
text-decoration: none;
width: 264px;
}
/* check lined question for the detail of the below code */
.btn::before {
content:"";
position:absolute;
z-index:-1;
inset: 0;
border: var(--b) solid transparent;
border-radius: var(--r);
background: inherit;
background-origin: border-box;
background-clip: border-box;
-webkit-mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
-webkit-mask-repeat: no-repeat;
}
/**/
.btn:hover {
color: #fff;
-webkit-text-fill-color: #fff;
-webkit-background-clip: border-box;
background-clip: border-box;
}
.btn:hover::before {
-webkit-mask:none;
}
body {
background:pink;
}
<a class="btn" href="#">
Click Here!
</a>
I got this answer from another post and it worked out for me:
border-bottom: 6px solid transparent;
border-image: linear-gradient(to right, red , yellow);
border-image-slice: 1;
and from my experience, I would use &:after to insert &:hover options to the desired hover effects.
I've got a navbar that looks briliant in all browsers except on Safari - it's stretched at full screen height (but not width).
In all browser it looks like this: https://imgur.com/KB1sBlM
And in Safari...well: https://imgur.com/g1L6wxe
My first assumptions and suspicions are position:sticky, linear-gradient and box-shadow but it's only my suspicions.
Not even sure whether it is a CSS problem. I use also react-scroller there, so my that's the issue?
Here is my SCSS code:
Navbar general:
.thematic-area-nav {
position: sticky;
position: -webkit-sticky;
width: 70vw;
top: 0;
left: 0;
z-index: 2;
font-size: 1.3vw;
-webkit-box-shadow: 0 0 25px 1px #000000;
box-shadow: 0 0 25px 1px #000000;
border-radius: 0 0 5px 5px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from($color-background-primary),
color-stop(50%, rgb(237, 237, 237)),
to($color-background-primary)
);
background: -webkit-linear-gradient(
top,
$color-background-primary 0%,
rgb(237, 237, 237) 50%,
$color-background-primary 100%
);
background: -o-linear-gradient(
top,
$color-background-primary 0%,
rgb(237, 237, 237) 50%,
$color-background-primary 100%
);
background: linear-gradient(
to bottom,
$color-background-primary 0%,
rgb(237, 237, 237) 50%,
$color-background-primary 100%
);
color: black;
padding: 10px;
& > * {
color: black;
}
& > ul {
list-style: none;
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% auto;
grid-template-columns: 25% auto;
}
}
Logo:
.thematic-area-nav__logo {
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1/2;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
width: 100%;
height: 150%;
}
Buttons:
.thematic-area-nav__areas {
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12vw, 16vw));
grid-gap: 0.5em;
& > button {
border-top: none;
border-bottom: none;
border-right: 1px solid rgb(218, 218, 218);
border-left: 1px solid rgb(218, 218, 218);
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px;
box-shadow: 1px 1px 1px;
background-color: $color-background-primary;
font-size: 1vw;
&:hover {
color: black;
-webkit-box-shadow: inset 1px 1px 1px;
box-shadow: inset 1px 1px 1px;
font-weight: bold;
}
&:focus {
outline: none;
-webkit-box-shadow: inset 1px 1px 1px;
box-shadow: inset 1px 1px 1px;
font-weight: bold;
}
}
}
.thematic-area-nav__singleThematicArea {
& a {
text-decoration: none;
color: black;
}
& > * {
text-decoration: none;
cursor: pointer;
color: black;
}
}
Is that a CSS problem indeed?
I looked into the html/scss code from jsbin, did some cleanup and managed to achieve something I think is close to what you had in mind.
Some notes:
Avoid using vw and vh for font sizes unless there is a really good reason not to do so.
If specifying width/height in % always figure out how the browser calculates those (ask yourself "percentage of what?").
Use https://validator.w3.org/ - it helps.
Avoid mixing camelCase and-this__thingy.
Keep your code tidy.
HTML
<div class="thematic-area-nav">
<div class="thematic-area-nav__logo-wrapper">
<img class="thematic-area-nav__logo" src="https://picsum.photos/200/90" alt="Logo Coaching People">
</div>
<ul class="thematic-area-nav__areas">
<li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 1">Obszar tematyczny 1</a></li>
<li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 2">Obszar tematyczny 2</a></li>
<li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 3">Obszar tematyczny 3</a></li>
<li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 4">Obszar tematyczny 4</a></li>
</ul>
</div>
SCSS
.thematic-area-nav {
position: sticky;
padding: 5px;
border-radius: 0;
margin: 0 0 20px;
top: 0;
right: 0;
left: 0;
z-index: 2;
font-size: 16px;
box-shadow: 0 0 25px 1px #000000;
border-radius: 0 0 5px 5px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from($color-background-primary),
color-stop(50%, rgb(237, 237, 237)),
to($color-background-primary)
);
color: black;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
#media (max-width: 420px) {
display: block;
}
}
.thematic-area-nav__logo-wrapper {
#media (max-width: 420px) {
text-align: center;
margin-bottom: .6em;
}
}
.thematic-area-nav__areas {
list-style: none;
margin: 0;
padding: 0 0 0 8px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
flex: 1;
}
.thematic-area-nav__singleThematicArea {
padding: .6em 1em;
margin-bottom: .6em;
text-decoration: none;
color: black;
border-top: none;
border-bottom: none;
border-right: 1px solid rgb(218, 218, 218);
border-left: 1px solid rgb(218, 218, 218);
border-radius: 5px;
box-shadow: 1px 1px 1px;
background-color: $color-background-primary;
&:hover {
color: black;
box-shadow: inset 1px 1px 1px;
}
&:focus {
outline: none;
box-shadow: inset 1px 1px 1px;
}
}
It’s quite unlikely that react code is causing the problem. Could you copy the html that is created by your react application, the css code and create a test case with just those? It would be good to establish if the problem appears when your JS is not “enabled”. How do you feel about sharing a link to your repo?
Some side notes: putting a link inside a button does not seem right. It will most definitely fail any accessibility evaluation, also class="Obszar tematyczny 3” value doesn’t seem right, ul element should only have li as children, placing anything else inside it is, well, WRONG.
There is also quite a lot of flex box weirdness in your styles. By reading it I’m not really able to grasp your intentions. I think that you’re not fully familiar with flexbox properties that belong to flex container and those that belong to its children.
In addition to that, you could stop using * selector. Just stop. World will be a better place if you do.
I am trying to make a button like this:
.
A single button that is "divided" into two parts - a number, and a title.
Both parts have different background colors, font colors, and the text is centered in the corresponding background. When hovered, it increases in size.
That picture is the real result of the code below. However, there are a few problems I cannot seem to solve.
1) I would like to have it work like a single element, but so far, I was only able to achieve this by creating two different divs, for each section of the button. Is there a more elegant way to achieve the same result?
2) When I scale down the browser window, I get something like this:
.
I don't want it to get split like that. Also, I cannot seem to keep it centered in the page. If you notice, it is a bit to the right side...
How can I solve those problems?
Here's the code:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
float: left;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
}
#btn42 {
width: 50%;
margin: auto;
}
#btn42:hover {
transform: scale(1.05);
}
#btnNumber {
text-align: center;
width: 40px;
background: #e2e1e1;
color: #696969;
}
#btnTitle {
width: 300px;
text-align: center;
background: white;
color: #085388;
}
<div id="btn42">
<div class="btn" id="btnNumber">42</div>
<div class="btn" id="btnTitle">Some Random Title</div>
</div>
Use one element and rely on pseudo element for the number:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn:hover {
transform: scale(1.05) translateX(20px);
}
.btn {
width: 300px;
margin: auto;
transform:translateX(20px); /*fix centring due to pseudo element*/
text-align: center;
background: white;
color: #085388;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
position:relative;
}
.btn::before {
content: attr(data-nb);
position:absolute;
top:0;
right:100%;
width: 40px;
background: #e2e1e1;
color: #696969;
box-shadow:
3px 0 #fff, /*fix shadow overlap*/
3px 3px rgba(0, 0, 0, 0.3);
}
<div class="btn" data-nb="42">Some Random Title</div>
I think using a <button>-tag with two <span>-tags inside would be more appropriate. To avoid the button wrapping to a new line use white-space: nowrap;. To center it on your page simply use text-align, like in my example, or one of the many other methods. Depends on the context of the parent element. If it is centered horizontally and vertically on the page I would rather use flexbox.
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
main {
text-align: center;
}
.btn {
border: none;
background: #fff;
line-height: 24px;
margin: 0;
padding: 0;
white-space: nowrap;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
transition: transform 200ms ease-in-out;
}
.btn span {
background: #fff;
display: inline-block;
margin: 0;
padding: 0.2em 0.5em 0.2em;
}
.btn span:first-of-type {
background-color: #ccc;
color: #696969;
}
.btn:hover {
transform: scale(1.03);
}
<main>
<button class="btn"><span>42</span> <span>Some Random Title</span></button>
</main>
I did not use the standard approach in CSS, is there a more semantically correct approach and moree cross-browser to solving such problems?
Problems:
Many code.
Using the property ::after (I think this is superfluous).
The button has a fixed size.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #050B1F;
}
#button-continue {
margin-top: 46px;
width: 331px;
height: 54px;
border: 3px solid transparent;
border-radius: 56px;
background-color: rgba(11, 27, 55, 1);
position:relative;
cursor:pointer;
}
#button-continue::after {
content: "";
width:337px;
height:60px;
position:absolute;
z-index:-5;
top:-6px;
left:-6px;
border-radius: 56px;
background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px);
}
.button-continue__text {
text-transform: uppercase;
font-size: 0.875em;
color: #99CEFF;
font-weight: 400;
}
.button-continue__text::after {
content: url('img/icon-continue.svg');
position: relative;
top: 3px;
left: 10px;
}
<button id="button-continue">
<span class="button-continue__text">Continue</span>
</button>
I found this example online.
By using this you can avoid using a pseudo-element. But the problem I found was that the created border-image does not bend around the border-radius. So this is probably not what you are looking for.
Using a plain-coloured border would work, but the background image is not made to work with rounded borders. So what you did is probably the way to do it.
I'll just include my code for completeness, but be warned.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #050B1F;
}
#button-continue {
margin-top: 46px;
width: 331px;
height: 54px;
border-width: 3px;
border-style: solid;
border-radius: 56px;
border-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px) 1 round;
background-color: rgba(11, 27, 55, 1);
position: relative;
cursor: pointer;
overflow: hidden;
}
.button-continue__text {
text-transform: uppercase;
font-size: 0.875em;
color: #99CEFF;
font-weight: 400;
}
<button id="button-continue">
<span class="button-continue__text">Continue</span>
</button>
I have the following button.
The CSS for the button above is this:
.cta-btn {
display: inline-block;
margin: 20px 0 0 20px;
color: #fff;
background-color: #FF8F1B;
background-image: linear-gradient(to right, #2ab3ff, #ff2d00);
box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
font-size: 21px;
border-radius: 30px;
padding: 12px 21px;
font-family: Montserrat;
}
click me
I want the button to change gradient color smoothly when I hover over it. I do not want the gradient color to just snap onto the button when I hover it. This is my attempt at a smooth gradient color transition:
a.cta-btn:hover {
background-image: linear-gradient(to right,#FF2A67,#FF5D3A);
color: #fff;
box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
transition: background-image .3s linear;
transition: box-shadow .3s linear;
}
Any help is much appreciated.
Short answer, you can't using just background. However, you can achieve a similar effect using other elements (or pseudo elements) inside and fading them in on hover.
The following example uses two pseudo-elements as the two background states. On hover, we simply fade-in the new background giving a similar transition effect that would happen if gradients were transition-able.
NOTE: Not all browsers support transitions on pseudo elements, so you may need to add empty elements to achieve the same effect on older/unsupported browsers.
.cta-btn {
position: relative;
display: inline-block;
margin: 20px 0 0 20px;
color: #fff;
box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
font-size: 21px;
border-radius: 30px;
overflow: hidden;
padding: 12px 21px;
font-family: Montserrat;
transition: box-shadow.3s ease-in-out;
text-decoration: none;
}
/* These are the two backgrounds, absolutely positioned to cover. */
.cta-btn::before,
.cta-btn::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(to right, #2ab3ff, #ff2d00);
border-radius: 30px;
z-index: -1;
}
.cta-btn::after {
opacity: 0;
background-image: linear-gradient(to right,#FF2A67,#FF5D3A);
transition: opacity.3s ease-in-out;
}
/* On hover, transtiion the shadow of the anchor, and fade in the after element to show the new background. */
.cta-btn:hover {
box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
}
.cta-btn:hover::after {
opacity: 1;
}
click me
I have try all your answers, and i prefer this :
It's lightly and working perfect with only background-size property for the hover
and Work with Chrome IE and ff
Enjoy
.ex-button-0 {
transition: all ease 0.5s;
cursor: pointer;
padding: 10.5px 25px;
border: none;
border-radius: 35px;
background-image: linear-gradient(to left, black, blue, yellow, orange);
background-size:300%;
background-position: 0 0;
-webkit-appearance: none !important;
color: #000;
text-decoration:none
}
.ex-button-0:hover {
background-position: 100% 0;
color:#fff;
}
<a class="ex-button-0" href="">Exemple</a>
Though still able to see background decreasing and increasing in dimensions, this is partially possible using multiple background properties at same element, toggling background-size property.
.cta-btn {
color: #fff;
background: linear-gradient(to right, #2ab3ff, #ff2d00)
, linear-gradient(to right,#FF2A67,#FF5D3A);
background-size:100% 100%, 0% 0%;
background-origin: border-box, border-box;
box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
font-size: 21px;
border-radius: 30px;
padding: 12px 21px;
font-family: Montserrat;
transition: background .3s linear;
}
.cta-btn:hover {
background-size:0% 0%, 100% 100%;
box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
}
click me
Probably a little late to the party, but I did manage to get a gradient transition into a solid color, which is what I needed for my project.
Here is the codepen for proof of concept.
https://codepen.io/etc-umbrella/pen/pXremq
<button class="ui-button">This is a button</button>
<h2>Creating an aninmated gradient background button using only SCSS. Worked pretty good. Didn't have to use any crazy javascript</h2>
.ui-button {
position: relative;
overflow: hidden;
border-radius: 6px;
cursor: pointer;
padding: 12px 18px;
border: 1px solid aqua;
background-color: white;
color: #ffffff;
font-family: raleway;
font-weight: bold;
font-size: 16px;
z-index: 1;
transition: all 800ms ease-in;
&:after{
content: '';
position: absolute;
left: -200%;
top: 0px;
width: 400%;
height: 100%;
background: rgb(33,209,159);
background: linear-gradient(45deg, rgba(33,209,159,1) 0%, rgba(34,44,64,1) 50%, rgba(21,65,153,1) 100%);
z-index: -1;
transition: all 800ms ease-in;
}
&:hover{
color: #ffffff;
background-color: #21d19f;
}
&:hover:after{
left: 0%;
opacity: 0;
}
}
#import url('https://fonts.googleapis.com/css?family=Montserrat:500');
html,body {
font-family: 'Montserrat', sans-serif;
margin:0;
padding:0;
background: linear-gradient(to right, #c9d6ff, #e2e2e2);
}
div {
height: 100vh;
display: flex;
align-items:center;
justify-content:center;
}
h1 {
font-size: 42px;
background-size:200%;
padding:15px;
border-radius:5px;
background-image: linear-gradient(to top left, #fe87c3 0%, #D38312 50%, #A83279 100%);
transition: .3s ease;
cursor: pointer;
}
h1:hover {
background-position: 90%;
color: #202020;
}
.home {
background-size: 200%
}**strong text**
Here is a demo
https://codepen.io/Mikeytown19/pen/aLpNZa