i have a button with the following structure:
<button className='ctaBtn'>
<a href={props.url}>Open</a>
</button>
And this is its styles:
.ctaBtn{
border-radius: 5px;
width: 70px;
height: 40px;
padding: 10px;
border: .5px solid rebeccapurple;
background-color: white;
color: rebeccapurple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
}
.ctaBtn:hover{
background-color: rebeccapurple;
}
.ctaBtn a:hover{
text-decoration: none;
color: white;
}
.ctaBtn a{
list-style-type: none;
text-decoration: none;
color: rebeccapurple;
}
As i hover over the button the background color changes to purple and as i hover over the a tag the font color changes to white. The issue is that before i get with the cursor to the a tag the button background is purple and the text is also purple. What i want to achieve is that as soon is pass through the button both css properties are activated the background color purple for the button and the white color for the text. How can i achieve this?
We combine some of your properties and hit the nested anchor tag from the parent action. See example below, but see additional info below.
.ctaBtn{
border-radius: 5px;
width: 70px;
height: 40px;
padding: 10px;
border: 1px solid purple;
background-color: white;
color: purple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
transition: background-color .25s ease, color .25s ease;
}
.ctaBtn:hover{
background-color: purple;
}
.ctaBtn:hover a {
color: white;
}
.ctaBtn a {
text-decoration: none;
}
<button class='ctaBtn'>
Open
</button>
On a side note though, you shouldn't nest an anchor tag inside a button as they're mutually exclusive in use. I'd prefer to see something like this instead for WCAG and semantic purposes.
.ctaBtn{
border-radius: 5px;
height: 40px;
padding: 10px;
border: 1px solid purple;
background-color: white;
color: purple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
transition: background-color .25s ease, color .25s ease;
}
.ctaBtn:hover{
background-color: purple;
color: white;
}
<button class='ctaBtn'>
WORDS
</button>
Or swap button for <a> tag instead but neither as a child of one another.
It's because you set a padding on the button so the a tag is smaller than its parent -> your problem.
Another thing: Don't use an a tag in a button tag, it's accessibility complete nonsense. You only need an a tag and a span.
<a href="#" class="ctaBtn">
<span>Open</span>
</a>
Related
How to add border bottom on hover effect as in this image
Add :hover for your button like this:
button {
width: 300px;
height: 60px;
border-radius: 10px;
background-color: #d94346;
border: none;
color: white;
font-weight: bold;
font-size: 1.3rem;
}
/* Add hover effect */
button:hover {
border-bottom: #bb262a 6px solid;
}
<button>Hover</button>
Is this result what you were expecting for ?
A box-shadowwould be more appropriate in my opinion.
EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.
button {
font-size: 30px;
padding: 30px 250px;
color: white;
background-color: #d84446;
border: none;
border-radius: 15px;
}
button:hover {
box-shadow: 0px 7px 0px #bb262a;
cursor: pointer;
}
<button>Hover</button>
you should do it in the other order
button:hover {
border-bottom: 4px solid #bb262a;
}
I know this questions has been asked a dozen times, but I can't seem to get my button to have a hover and pressed effect. I am trying to have the color of my button change when I hover over it. I would also like the button to have an active pressed effect when clicked. I feel like it has something to do with my css linkage, but I have tried a bunch of different combinations and still can't get it to work.
HTML
<a href="#">
<button>Click for Plans</button>
</a>
css
button {
background-color: #3AF8AB;
border-style: none;
color: white;
position: absolute;
border-radius: 10px;
font-size: 3.5vmin;
margin-top: 0px;
font-weight: bold;
padding: 7px;
margin-left: 73%;
margin-right: 1%;
cursor: pointer;
}
.button:hover {
background-color: blue;
transition: 0.7s;
}
.button:active {
background-color: blue;
box-shadow: 0 5px #666;
transform: translatey(4px);
}
button:hover and button:active in css are class and you have element. You can add the class button to your button or change the style to button ( and not .button )
button {
background-color: #3AF8AB;
border-style: none;
color: white;
position: absolute;
border-radius: 10px;
font-size: 3.5vmin;
margin-top: 0px;
font-weight: bold;
padding: 7px;
margin-left: 73%;
margin-right: 1%;
cursor: pointer;
}
button:hover {
background-color: blue;
transition: 0.7s;
}
button:active {
background-color: blue;
box-shadow: 0 5px #666;
transform: translatey(4px);
}
<button>Click for Plans</button>
I'm trying to create a search bar in vue. Right now the search bar opens from the left side, but I want it to open from the right side. Instead of background image, I want to use a font awesome icon as well. How do I achieve these two?
<template>
<span id="demo-2">
<input type="search" placeholder="Search">
</span>
</template>
<style scoped>
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
</style>
I don't know the answer for the animation but if you want to add font awesome icon you can add its link to the main template file for the vuejs . just copy paste you link to the head section in there and use the <i>search icon</i> in the vue code.
Replacing background by a font-awesome icon
You could use :after or :before property in CSS :
https://developer.mozilla.org/en/docs/Web/CSS/::before
It will allow you to display content, linked to your input (like a font-awesome glyphicon for example) :
input {
position: relative;
}
input:after {
content: '\f002';
position: absolute;
right: 10px;
top: 5px;
}
In this case, the font-awesome icon is : \f002 :
https://fontawesome.com/icons/search?style=solid
Animate from the right
If you use :after property and the position is absolute to your input (with a right CSS property), it should open from the right.
I am creating a touch device application. I have to create a Login button as shown in the image
I have created the remaining part myself . I am not able to create the LOGIN button style
Here is is an example. You can easily modify the css to your need :
.btn-login {
padding: 10px 30px;
color: #333;
border: 1px solid #333;
background: #fff;
border-radius: 20px;
transition: all ease-in-out 0.3s;
}
.btn-login:hover {
border-color: #fff;
background: #666;
color: #fff;
}
<p><a class="btn-login">LOGIN</a></p>
I also added some hover effects to it. Here's the CSS for this Button,
.log-in {
text-transform: uppercase;
padding: 10px;
width: 100px;
height: 40px;
color: #888;
border: 1px solid #888;
background: #fff;
border-radius: 30px;
line-height: 20px;
transition: all ease-in-out 0.3s;
}
.log-in:hover {
background: #4f8be1;
color: #fff;
border-color: #fff;
}
Hope this will work for you, Here's Code on codepen.io
See the Pen CSS Simple, Clean login button by vaibhav kubre (#vkubre) on CodePen.
my friends, i guess you may looking something like those:
// demos:
http://codepen.io/mehmetmert/pen/RNoJmj
http://codepen.io/clein/pen/xnmKL
http://codepen.io/andytran/pen/GpyKLM
I am creating a jobs page and was just making this when I ran across what I think is a styling problem.
If you look at the image below you can see the Apply button comes before the time and city but I want the Apply button to be farthest to the left but it will not position that way which only led me to believe this is a styling error on my part. Does anybody know why this would be? Code posted below.
HTML
<div class="job-case">
<h4>iOS Engineer</h4>
<span>Chicago</span>
Apply
</div>
CSS
.job-case {
height: 0 auto;
width: 0 auto;
background-color: white;
margin: 10px;
padding: 0 auto;
border-radius: 5px;
border: 1px solid none;;
}
.job-case:hover {
background-color: #F3EFF5;
border-color: #212121;
}
.job-case h4 {
color: #212121;
font-weight: bold;
font-size: 20px;
display: inline-block;
padding-left: 30px;
}
.job-case a {
float: right;
height: 0 auto;
margin-top: 17px;
padding: 10px;
color: #72b01d;
background-color: none;
border: 2px solid #72b01d;
border-radius: 5px;
}
.job-case a:hover {
background-color: #72b01d;
border-color: #72b01d;
color: white;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.job-case span {
float: right;
padding: 30px;
font-weight: bold;
font-size: 15px;
color: #212121;
}
It is not a styling issue. When using float:right on siblings they stack and they go to the right in the order they are in the DOM. so the first one with float:right will go to the farthest right.
So you need to change the html and put the a before the span
<div class="job-case">
<h4>iOS Engineer</h4>
Apply
<span>Chicago</span>
</div>
Demo at https://jsfiddle.net/g8kuve66/
Quoting the float specification
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.