This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 2 years ago.
I want to scale(x,y) my <a> element when I click on it, but it doesn't work. I use Mozilla Firefox web browser to run the program.
Here is my code:
scaleElement.html
<html>
<head>
<title>CSS3 Transform and Transition</title>
<style>
a{
background-color: green;
color: white;
padding: 10px 20px;
text-decoration: none;
border: 2px solid #85ADFF;
border-radius: 30px 10px;
transition: 2s;
}
a:hover{
transform: scale(2,2);
}
</style>
</head>
<body>
<center>click here</center>
</body>
</html>
transform is not applicable to inline elements such as <a>. You could display the link as inline-block or block to get transform to work:
transformable element
A transformable element is an element in one of these categories:
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display
property computes to table-row, table-row-group, table-header-group,
table-footer-group, table-cell, or table-caption [...]
Where atomic inline-level elements include:
replaced inline-level elements, inline-block elements, and
inline-table elements
a { display: inline-block; }
a:hover { transform: scale(2,2); }
Besides, there's no on-click state available in CSS. Possible options are :active or :hover, or using checkbox hack.
a {
background-color: green;
color: white;
padding: 10px 20px;
text-decoration: none;
border: 2px solid #85ADFF;
border-radius: 30px 10px;
transition: all 2s;
display: inline-block; /* <-- added declaration */
}
a:hover{ transform: scale(2,2); }
/* just for demo */
body { padding: 2em; text-align: center; }
click here
Use display:block and give it a height and width
a {
background-color: green;
color: white;
padding: 10px 20px;
text-decoration: none;
border: 2px solid #85ADFF;
border-radius: 30px 10px;
transition: 2s all ease-in;
display: block;
width:100px;
height:50px;
}
a:hover {
transform: scale(2, 2);
}
<center>click here
</center>
Related
how can I create a button animation like this using css?
what I want to achieve
I want to display only first letter of button, and when hover it expands and shows rest of letters.
maybe something like:
<button>h<span>ello</span></button>
and css:
button {
width: 40px;
height: 40px;
border-radius: 50%;
}
button span {
display: none: /* maybe hide it first? */
}
but when I change the width it looks like a stretched circle because the radius. Whats the best approach to modify the width but keep the same border radius?
Thanks,
AH.
Firstly, you shouldn't use border-radius of 50%, that would make an oval when the width is larger than its height, you should use a fixed value, such as 30px.
Secondly, you shouldn't fix height and width, you should set the padding, so that the text won't run out of the button.
Thirdly, to change the content, you could use the content property.
In the code, I used :after, which adds "ello" after "H" on :hover.
button {
padding: 15px;
border-radius: 30px;
}
button:hover:after {
content: "ello";
}
<button>H</button>
Instead of using a nested <span>, I recommend using the :after CSS selector, to show the rest of the button's label. You will want to use CSS3 transitions for a smooth hover animation. I combined the :after selector with the transition, and a :hover opacity of 1, so that the button text appears simultaneously as the button expands.
button {
width: 50px;
height: 50px;
border-radius: 10px;
padding:6px;
background-color:black;
color:white;
font-size:1.03em;
box-shadow:3px 3px red;
}
button:hover {
width:100px;
height:50px;
border-radius: 10px;
padding:6px;
background-color:black;
color:white;
transition:all 0.4s ease 0s;
font-size:1.02em;
box-shadow:3px 3px blue;
}
button span {
opacity: 0;
}
button:hover span {
opacity: 1;
transition: all 0.3s ease 0s;
}
button:hover span:after {
content:"ello!";
}
<button>H<span></span></button>
You can define a border-radius value in px, em, or rem. Using % will create an ellipse.
You can avoid additional markup by using the ::first-letter attribute.
Example...
button {
background: black;
color: transparent;
font-size: 3rem;
border: 0;
border-radius: 2.5rem;
width: 5rem;
height: 5rem;
padding: .5rem 1.5rem;
}
button::first-letter {
color: white;
}
button:hover {
width: auto;
color: white;
}
<button>Hello</button>
Simple Use of the :hover tag below /
CSS:
.button {
background-color: pink;
}
.button:hover {
background-color: blue;
}
HTML:
<h3 class="button"> Hello, World! </h3>
I have animated my navigation buttons that expand upon hover, but they keep on disrupting the flow of the rest of the page. I've tried using z-index to take them out of the flow, but that isn't working, either. Is there a way to do this with out the buttons shoving everything out of whack? Here's my relevant code so far:
.btn-group .button {
background-color: teal;
border: 2px solid orange;
color: orange;
padding: 2px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
font-size: 1em;
border-radius: 50%;
margin: 5px 0 5px 5px;
padding-left: 30px;
position: relative;
z-index: 1; }
.btn-group .button:hover {
background-color: cadetblue; }
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s; }
.button span:after {
content: '\00bb';
opacity: 0;
top: 0;
right: -20px;
transition: 0s;
padding-left: 10px; }
.button:hover span {
padding: 10px;
color: black;
font-size: 1.5em; }
.button:hover span:after {
opacity: 1;
right: 0;
color: black; }
Thanks for your help!
You have to limit your animations to properties that do not interfere with object's position and dimensions in the document flow.
Those are: transform, left, right, bottom and top. For the last 4, in order to work, you also need position:relative on the button. When using any of these, even though you see the element moving, its place is kept in the flow, just like it would still be there. Only its projected image is moved/transformed.
Example with transform:
.button {
margin: 1rem;
transition : transform .3s cubic-bezier(.4,0,.2,1);
display: inline-block;
border: 1px solid black;
padding: 1rem;
}
.button:hover {
transform: scale(1.1);
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<a class="button">Example with transform</a>
<div class="red">see? I'm not moving</div>
That's how the vast majority of web animations are done (using transforms).
As an alternative, if you really want to animate properties that would normally affect the rest of the document, you will need to remove your element from document flow. For that, you need to:
wrap your element in a wrapper (placeholder) of desired dimensions (which will never move and keep everything in place), and give the wrapper position:relative,
set position:absolute on the button.
Now you can animate anything on the button without affecting the rest of the document.
But remember, the wrapper needs to have proper dimensions, as the button, now being absolutely positioned, will no longer occupy any space in the document flow. Also, note that your button is now relative to its placeholder. If the placeholder moves, the button moves too.
Example with absolute positioning and wrapping:
.wrapper {
height: 5rem;
position: relative;
}
.button {
position: absolute;
top: 1rem;
padding: 1rem;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid black;
}
.button:hover {
top: .5rem;
padding: 1.5rem;
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<div class="wrapper">
<a class="button">Example with absolute positioning and wrapping</a>
</div>
<div class="red">see? I'm not moving</div>
That's the basics.
As a side note, best practices require you to limit animations to a very select and limited bunch or properties which do not hit browser performance: the bunch is made of exactly two items:
transforms
and opacity.
You animate anything else... boom!, your scroll begins to stagger on devices with limited resources. There is quite a lot to read on the subject, but here's a good one.
Setting a high z-index does not take the element out of the document flow, you need to use absolute positioning for your button.
i.e.
.btn-group{
position: relative;
}
.button{
position: absolute;
}
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 6 years ago.
I'm trying to make a white button with rounded corners and with a little transparency. The text should not be transparent. I tried to use opacity: initial for <p> style but it seems to not work. Take a look at my snippet to understand better.
body {
background-color: #264D38;
}
.button {
display: inline-block;
width: 150px;
border-radius: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #898989;
opacity: 0.4;
filter: alpha(opacity=40); /* Para IE8 e anteriores */
}
span.button > p {
opacity: initial;
padding: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
}
.button:hover {
background-color: #000000;
}
<body>
<span class="button"><p>BUY NOW</p></span>
</body>
You could use an RGBA value for the background colour instead of using opacity.
Example
.button {
display: inline-block;
width: 150px;
border-radius: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgba(137,137,137,.4);
}
Opacity affects all children elements. Children can't have a 0% transparency, when a parent have 40%.
Other solution is setting only semi-transparent background.
body {
background-color: #264D38;
}
.button {
display: inline-block;
width: 150px;
border-radius: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.1);
}
span.button > p {
padding: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
}
.button:hover {
background-color: rgba(0, 0, 0, 0.2);
}
<body>
<a href="#">
<span class="button">
<p>BUY NOW</p>
</span>
</a>
</body>
First, use a proper structure of the code. span is an inline type and must be in the p element, which is a block type, as #hungerstar says it will not be a valid markup.
Then you can do it like this, with :before pseudo element to set the background and absolute position of the span :
See it here
You can use RGBA or HSLA for your background-color. You can improve on your markup so it's no longer invalid (you're wrapping a block level element <p> with an inline element <span>). We now have one less element with the same results.
Support chart for rgba() and hsla().
<span class="button">BUY NOW</span>
body {
background-color: #264D38;
}
.button {
display: inline-block;
width: 150px;
padding: 26px 0;
border-radius: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgba( 137, 137, 137, 0.4 );
color: #FFF;
font-weight: bold;
text-align: center;
}
.button:hover {
background-color: #000;
}
Demo JSFiddle.
I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent
I am having trouble with the combination of the CSS selector :nth-child(...) and the box-shadow effect. The desired effect is as follows:
Even-numbered div elements in a container are given an alternating background color.
When the user hovers over one of the div elements, a box shadow is applied, giving the appearance of the "hovered" div "hovering" above the following div.
However, I am running into a problem. While the box shadow is applied to the "hovered" element, the effect is different for even-numbered div elements as opposed to odd-numbered ones. Essentially, the shadow of each even div overlaps the following odd div, while the shadow of each odd div is rendered behind the following even div.
This pen demonstrates the issue better: http://codepen.io/jtlovetteiii/pen/cEaLK
Here is the HTML snippet:
<div class="rows">
<div class="row"></div>
<div class="row"></div>
...
</div>
Here is the CSS:
.rows
{
background-color: #AAAAAA;
}
.rows .row:nth-child(even)
{
background-color: #E2E2E2;
}
.row
{
height: 20px;
cursor: pointer;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
}
What am I missing?
The reason this is happening is because only your nth-child(even) divs have a background color. While it appears that the hover shadow is overlapping the other div, it really isn’t – it’s overlapping the parent’s background color.
You can fix the issue with a combination of position: relative and z-index:
.rows {
position: relative;
}
.row
{
position: relative;
height: 20px;
cursor: pointer;
background-color: #CCCCCC;
}
.row:nth-child(even)
{
background-color: #E2E2E2;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
z-index: 100;
}
CodePen demo
Interesting. Not sure why that is happening, but I found a workaround. By adding a position: relative to the :hover elements, the hover effect is more consistent:
http://codepen.io/anon/pen/hsKEf
.rows
{
background-color: #AAAAAA;
}
.rows .row:nth-child(even)
{
background-color: #E2E2E2;
}
.row
{
height: 20px;
cursor: pointer;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
position: relative;
}
It still doesn't look quite right, but maybe a margin offset would cause it to look a bit better.
JSFiddle
.row
{
height: 20px;
cursor: pointer;
position:relative;
z-index:1;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
z-index:2;
}