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.
Related
How can I get the box inside the buttons?
I use dojo toolkit and the button css is as follows:
.button0 {
margin: 2px;
padding: 0px;
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
display: inline-block;
cursor: pointer;
color: #333333;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-decoration: none;
outline: none;
outline-color: transparent;
}
.button0:hover {
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color: #ffab23;
outline: none;
outline-color: transparent;
}
.button0:active {
position: relative;
outline: none;
outline-color: transparent;
}
What I want to remove is the 1px border that has the text.
can't be sure without seeing the html. I'm assuming the css class is on the button element like so
<button class="button0">
and that there are no nested element tags.
add:
.button0:focus{ outline: 0 }
may fix it.
note: for accessibility, its best not to remove the outline.
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/
Is there a possibilty to combine text gradient with box shadow?
See example-image to understand what exactly I want to achive.Example-Image
I've achived the Gradient, but the box shadow I added after, appears in foreground.
How can I solve that?
h2 {
display: inline-block;
background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-shadow: inset 0px 30px white;
}
Would love to get some help!
Thank's!
(I'm sorry for my english)
You can try multiple background:
h2 {
display: inline-block;
font-size:50px;
color:transparent;
background-image:
linear-gradient(90deg,#c93718 0%,#035b34 30%),
linear-gradient(#ccc,#ccc);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
-webkit-text-fill-color: transparent;
}
<h2>A title here</h2>
This won't work on Firefox due to a know bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1571244
As an alternative for Firefox, consider pseudo element:
h2 {
display: inline-block;
font-size: 50px;
color: transparent;
background-image: linear-gradient(90deg, #c93718 0%, #035b34 30%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #ccc;
}
<h2>A title here</h2>
Try adding a div and then you can play around with position will solve your issues.
h2 {
display: inline-block;
background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 999999;
position: absolute;
}
div{
background-color: gray;
height: 30px;
width: 140px;
position: absolute;
top: 22px;
}
<h2>This is Demo</h2>
<div></div>
I am trying to add a hover effect which adds background-image when a user hovers on the button but on hover there is a little area left on the left side which is still transparent.
Basically, I added two buttons, next to each other and the problem is with the 2nd button, if I remove first one or move 2nd to next line then it works totally fine.
Here is what am I getting.
Here is how it looks if I remove the first button
Here is the code
.gradient-button-1 {
color: orangered;
background: none;
padding: 1.5rem 3rem;
font-size: 1.3rem;
border: solid 10px transparent;
border-image: linear-gradient(to top right, orangered,yellow);
border-image-slice: 1;
outline: none;
transition: all ease 0.3s;
}
.gradient-button-1:hover {
background-image: linear-gradient(to top right, orangered,yellow);
color: white;
}
.gradient-button-2 {
color: orangered;
background: none;
padding: 1.5rem 3rem;
font-size: 1.3rem;
border: solid 10px transparent;
border-image: linear-gradient(to right, orangered,transparent);
border-image-slice: 1;
outline: none;
transition: all ease 0.3s;
}
.gradient-button-2:hover {
background-image: linear-gradient(to right, orangered,transparent);
border-right: none;
border-right-style: none;
color: white;
}
<section>
<h4>Gradient Bordered Buttons</h4>
<button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
<button type="button" name="button" class="gradient-button-2">Gradient button 2</button>
</section>
In some screen sizes, background is not starting from the left most; which is why it leaves a small gap (white line).
You can add background-origin: border-box; to .gradient-button-2:hover. A good explanation and a live example can be found here at MDN:
The background-origin CSS property sets the background positioning area. In other words, it sets the origin position of an image set with the background-image property.
.gradient-button-1 {
color: orangered;
background: none;
padding: 1.5rem 3rem;
font-size: 1.3rem;
border: solid 10px transparent;
border-image: linear-gradient(to top right, orangered,yellow);
border-image-slice: 1;
outline: none;
transition: all ease 0.3s;
}
.gradient-button-1:hover {
background-image: linear-gradient(to top right, orangered,yellow);
color: white;
}
.gradient-button-2 {
color: orangered;
background: none;
padding: 1.5rem 3rem;
font-size: 1.3rem;
border: solid 10px transparent;
border-image: linear-gradient(to right, orangered,transparent);
border-image-slice: 1;
outline: none;
transition: all ease 0.3s;
}
.gradient-button-2:hover {
background-image: linear-gradient(to right, orangered,transparent);
border-right: none;
border-right-style: none;
color: white;
background-origin: border-box; /* This line is new! */
}
<section>
<h4>Gradient Bordered Buttons</h4>
<button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
<button type="button" name="button" class="gradient-button-2">Gradient button 2</button>
</section>
.gradient-button-1 {
color: orangered;
background: none;
padding: 1.5rem 3rem;
font-size: 1.3rem;
border: solid 10px transparent;
border-image: linear-gradient(to top right, orangered,yellow);
border-image-slice: 1;
outline: none;
transition: all ease 0.3s;
}
.gradient-button-1:hover {
background-image: linear-gradient(to top right, orangered,yellow);
color: white;
background-position: -1px;
background-size: 101%;
}
.gradient-button-2 {
color: orangered;
background: none;
padding: 1.5rem 3rem;
font-size: 1.3rem;
border: solid 10px transparent;
border-image: linear-gradient(to right, orangered,transparent);
border-image-slice: 1;
outline: none;
transition: all ease 0.3s;
}
.gradient-button-2:hover {
background-image: linear-gradient(to right, orangered,transparent);
border-right: none;
border-right-style: none;
color: white;
}
<section>
<h4>Gradient Bordered Buttons</h4>
<button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
<button type="button" name="button" class="gradient-button-2">Gradient button 2</button>
</section>
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