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>
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.
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/
I'm creating a form with gradient borders. To protect against the borders being removed by the browser on autocomplete I've had to wrap all of the elements in a DIV containing their border. box-sizing is used to include the padding in the element size because there's a textarea too. My issue is now with the submit button.
.input-container {
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
margin-bottom: 10px;
overflow: hidden;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
padding: 15px;
display: inline-block;
border: none;
outline: none;
border-radius: 30px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background: #FFFFFF;
}
input[type=submit]:hover {
background-image: linear-gradient(-45deg, #006699, #9900CC);
color: #FFFFFF;
}
<div class="input-container">
<input type="submit" name="submit" id="submit" value="Submit" required>
</div>
When a user hovers over the button there's an issue where there's a slight edge. For ease having the border there all of the time makes more sense. Having the border there always means the button only needs to fill rather than having no border and being entirely fill (it causes size to momentarily change)
Any ideas for how to get rid of this small outline on the edges would be appreciated so that the button looks truly filled.
You can see the outline appear occasionally below.
And static here
Is it ok?
.input-container:hover {
border: none;
}
.input-container {
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
border-radius: 30px;
margin-bottom: 10px;
overflow: hidden;
border: solid 5px transparent;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
padding: 15px;
display: inline-block;
border: none;
outline: none;
border-radius: 30px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background: #FFFFFF;
}
.input-container:hover input[type=submit] {
background-image: linear-gradient(-45deg, #006699, #9900CC);
color: #FFFFFF;
padding:30px 15px;
padding: 20px 15px;
}
<div class="input-container">
<input type="submit" name="submit" id="submit" value="Submit" required>
</div>
As we can see. the border causes this part background-image: linear-gradient(white, white) in .input-container. So lets manipulate it. Added an additional class to parent container .submit-container.
.input-container {
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
margin-bottom: 10px;
overflow: hidden;
box-sizing: border-box;
}
.submit-container:hover {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), radial-gradient(circle at top right, #006699, #9900CC);
}
input[type=submit] {
width: 100%;
padding: 15px;
display: inline-block;
border: none;
outline: none;
border-radius: 30px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background: none;
}
.submit-container:hover input[type=submit] {
color: #FFFFFF;
}
<div class="input-container submit-container">
<input type="submit" name="submit" id="submit" value="Submit" required>
</div>
This white border comes because of padding of outer div. You can do different way like removing div.
input[type=submit] {
width: 100%;
padding: 15px;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
margin-bottom: 10px;
overflow: hidden;
box-sizing: border-box;
}
input[type=submit]:hover {
background-image: linear-gradient(-45deg, #006699, #9900CC);
color: #FFFFFF;
padding: 18px;
border: solid 5px transparent;
}
<input type="submit" name="submit" id="submit" value="Submit" required>
it's because the white linear-gradient on the wrapper background.
below I gave to the gradient the colors of the button and it's look fine now
.input-container {
background-image: linear-gradient(-45deg, #006699, #9900CC), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
margin-bottom: 10px;
overflow: hidden;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
padding: 15px;
display: inline-block;
border: none;
outline: none;
border-radius: 30px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background: #FFFFFF;
}
input[type=submit]:hover {
background-image: linear-gradient(-45deg, #006699, #9900CC);
color: #FFFFFF;
}
<div class="input-container">
<input type="submit" name="submit" id="submit" value="Submit" required>
</div>
Is it possible to scale a text input only on the X axis while maintaining the size of the font?
I did something like this:
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
transform-origin: top left;
}
#searchInput:hover {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
#searchInput:focus {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
<input type="text" id="searchInput" name="search">
The result is the cursor on the middle of the input and the text stretched
Doing the same animation changing the width instead of scaling the input works, but I'm curious if it can be done with a transform.
Its not the correct way to implement this material type input text. Use background-position on :focus, :valid on the bottom border of input.
You should use something like the snippet below:
input::-webkit-input-placeholder, button {
transition: all 0.3s ease-in-out;
}
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required="">
Hope this helps!
I think you would need to work with the width rather than using scale. This way the input will change width without applying any scaling to its content.
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
}
#searchInput:hover {
border-bottom: 3px solid blue;
/*
Instead of using scale just change the width
your transition will take care of animation
*/
width: 250px;
}
#searchInput:focus {
border-bottom: 3px solid blue;
width: 250px;
}
<input type="text" id="searchInput" name="search">