I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/
Related
I am working on an old website for a client and I have run into a problem creating a button link. I considered creating a box with text in it, but I cannot produce text in the graphic that is as clear as the text generated in html. I have, therefore, created two boxes with blank space to accommodate the text. The text is superimposed over the box. The relevant code follows here.
.style1 {
font-size: 14px;
font-weight: bold;
}
.container {
position: relative;
text-align: center;
color: white;
font-weight: bold;
line-height: 100%;
}
.container:hover {
color: #000000;
}
.centered {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
}
.initials {
font-size: 16px;
}
.card {
width: 170px;
height: 100px;
background: url("otec_link.png") no-repeat;
display: inline-block;
}
.card:hover {
background: url("otec_link_gray.png") no-repeat;
color: black;
text-decoration: none;
}
.words {
color: #FFFFFF;
text-decoration: none;
}
.words:hover {
color: #000000;
text-decoration: none;
}
<div class="container">
<div>
<div class="centered" style="text-align:left;">
<span class="initials">O</span>nline<br><span class="initials">T</span>eacher<br><span class="initials">E</span>ducation<br><span class="initials">C</span>enter</div>
<span class="card"></span>
</div>
</div>
You can run the code to see the issues.
Here is what I am looking for:
A red box with white text.
On mouseover, a gray box with black text with anchor link available text and graphic.
Here is what I am getting:
A red box with white text.
On mousover the box, a gray box with white text, and when the pointer passes over the text it turns black and the red box returns.
There is a gap in the anchor link between the lines of text.
I have tried to create what is basically two links, one for the box and the other for the text to get around the font quality issue.
The website is comechildrensing.com. You can go there to see the issue in context. It is the top button in the vertical red menu bar on the left. If there is a tool I can use to make clean, sharp text in the graphics, it would make the whole mess go away. Otherwise, I am open to any solution that will resolve the problems.
Right now you've created three different hovers for three different elements that the user can hover over (pretty much) individually. It's better to do one hover and have it target other elements instead.
.container:hover .card {
background: url("otec_link_gray.png") no-repeat;
}
.container:hover .words {
color: black;
text-decoration: none;
}
I programmed a small app in R shiny using css for my buttons.
However button behavior is not what I expected.
See the gif
See below my code. What am I missing? I tried most of the focus/visited etc.
.btn-default {
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: white !important;
width:120px;
height: 48px;
padding-top: 8px;
background-color: #ECF0F1;
border-width: thin;
margin-right: 2px;
background: #1B1D21;
border-radius: 16px;
border-color: #1B1D21;
}
.btn-default:hover {
color: white !important;
background: #35BC27;
}
.btn-default:active {
color: white !important;
background: #35BC27;
}
.btn-default:focus {
color: white !important;
background: #35BC27;
}
.btn-default:visited {
color: white !important;
background: #35BC27;
}
it's because you have coded it to act like that.
Remove the
.btn-default:hover {
color: white !important;
background: #35BC27;
}
.btn-default:active {
color: white !important;
background: #35BC27;
}
and it will not take any action on hovering it with mouse.
:hover - is a pseudo class which allows you to change a color, size, text, display, width, height - almost everything you want whenever you "touch" it with your mouse.
:active - also a pseudo class which takes action when you try to do something with it.
I had the same problem after using the CSS from MaterializeJs.
The problem was on button:focus event in my case, but I think this could appear also on hover, focus-visible and others. You have to override the inherited property. Also, you can try to use "!important" on your back.
How can I make such an effect / animation with CSS? Could be with JavaScript/jQuery as well, if pure CSS is not possible.
None of my searches so far gave me any reasonable hints (perhaps I just do not know what the right terms to use here).
It does not have to be exactly the same: even a partial similar effect would do.
The animation required:
Normal state: a button with red background & border; white text. Only "Add to Cart" text, centered.
On hover/focused state: button's background becomes white; text color becomes red (so they invert places), the small > appears and moves to the right; the button text moves to the left.
The same in a text form:
[ ADD TO CART ] -- normal state
[ ADD TO CART > ] -- hovered state
Using Bootstrap 5.1 as a base style in my attempts (do not think that it matters here though).
HTML code:
<button class="btn btn-themed btn-effect text-uppercase"><span class="title">Add to Cart</span> <span class="extra">></span></button>
Base CSS:
/* === THEMED BUTTONS === */
.btn-themed {
border: 2px solid #ff1a0a;
background-color: #ff1a0a;
color: #fff;
border-radius: 5px;
transition: .5s;
}
.btn-themed:hover,
.btn-themed:focus {
border: 2px solid #ff1a0a;
background-color: #fff;
color: #ff1a0a;
}
/* === EFFECT ON BUTTON === */
.btn-effect span.extra {
display: none;
}
.btn-effect:hover span.extra,
.btn-effect:focus span.extra {
display: inline;
}
Here I'm hiding the bit with the > and showing it only on hover. This is to have the main button text to be fully centered (when a button in the "normal" state). On hover that bit shows up but:
It is jumpy (see the next image)
and most importantly: I have no idea how to position elements and what to apply to have them move as required.
I would really appreciate any hints / a working example on some existing website or even link to some JS library that can be used here etc.
Dont do animations on display property.
Just add margin-right on text on hover. Thats all
.button:hover .text {
margin-right: 50px;
}
https://codepen.io/VeterJS/pen/wvdRoKp
Is that what you are looking for?
/* === THEMED BUTTONS === */
.btn-themed {
border: 2px solid #ff1a0a;
background-color: #ff1a0a;
color: #fff;
border-radius: 5px;
transition: .5s;
width: 150px;
height: 50px;
transition: 1s;
}
.btn-themed:hover,
.btn-themed:focus {
border: 2px solid #ff1a0a;
background-color: #fff;
color: #ff1a0a;
}
/* === EFFECT ON BUTTON === */
.btn-themed span.extra {
visibility: hidden;
transition: 1s ;
}
.btn-effect:hover span.extra,
.btn-effect:focus span.extra {
visibility: visible;
margin-left: 40px;
}
<button class="btn btn-themed btn-effect text-uppercase"><span class="title">Add to Cart</span> <span class="extra">></span></button>
I want to add background color and make the size bigger of my icon when its hovered but what is the correct way to implement a:hover on this CSS code?
li a i.menu-icon {
color: #f3698a;
float: left;
width: 33px;
font-size: 12px
}
You can use this code:
(You can change the background color to what you want, I put #000 for demonstration only, also you can change the width value To what you need)
li a i.menu-icon:hover {
Background-color:#000;
color: #fff;
width: 50px;
font-size: 15px;
}
I've searched but couldn't find anything relating to this problem I'm having.
I have been trying to work this out for ages now but can't seem to do it. I have a div which has text and an image in it. I want all text and background within the div to change color when I hover anywhere within the div. I have made it so that the text at the bottom changes, along with the background color, but can't seem to get the top text (h4) to change color.
It changes color when I hover directly over the h4 element but not when I hover anywhere within the div.
The link below is a rough example of what I want to achieve. There is seperate styling on the CSS of the h4 tag so can't make it a p like the rest. That would be the easiest way to do this but unfortunately they must stay different.
This is my CSS style
.container {
text-align: center;
}
.container h4 {
text-align: center;
color: black;
}
#project1 {
text-align: center;
color: white;
background-color: white;
background-color: rgba(255,255,255,0.9);
color: black;
}
#project1:hover {
background-color: blue;
color: white;
}
#project1 h4:hover {
color: white;
}
#project1 h4 {
text-transform: uppercase;
}
a {
text-decoration: none;
}
Is there any way to do this using CSS and not jquery/javascript? I'm new to Web Development so only know some HTML/CSS at present.
Thanks.
Tom
JSFIDDLE LINK
Change your CSS style from
#project1 h4:hover {
color: white;
}
To
#project1:hover h4 {
color: white;
}
JSFIDDLE DEMO
You can use
#project1 h4 {
color: inherit;
}
to make it inherit #project1's color.
Demo
You can nest h4 tag in p tag.
no need for #project1 h4:hover in CSS.
Demo Fiddle