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>
Related
This question already has answers here:
Keep width when using letter-spacing on hover
(2 answers)
Closed 2 years ago.
i try something when i hover my button. Currenttly that's my code
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>
The problem is, when i hover my button, the text expand, the button expand too on the right.
I want to make button not expand (keep original size), only text inside expand and centerized, without put a width size, because i want it as component (I would never know the size of the text.)
ALL in css only.
The only one way i've find is to add a data attribute who come over, but i don't like this way because i reapt my text 2 times.
For you it's possible only CSS ? if yes how ? Thanks a lot
Hide the original button text and use it inside the after/before using below CSS rules.
.btn {
border: solid 1px purple;
color: white;
background: white;
padding: 10px 15px;
text-align: center;
position: relative;
}
.btn:hover::after{
letter-spacing: 1px;
}
.btn::after{
content: 'My Button';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
color: purple;
transition: 0.5s;
}
<button class="btn">My bouton</button>
use absolute positioning on the text element and set it relative to the button element
edit:
.btn {
position: relative;
border: solid 1px purple;
color: purple;
background: white;
padding: 10px 15px;
text-align: center;
transition: .5s;
width: 5em;
}
.btn:hover {
letter-spacing: 1px;
}
span {
//position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
<button class="btn">
<span>My button</span>
</button>
Most easy solution would be to give the button a width... but you don't want that.
As an alternative, you can play with the padding-left and padding-right.
In normal state, you give it some more padding, on hover state, bring it back to 15px.
Note: changing the text length will affect the width, the padding then needs to be adjusted too...
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 20px 10px 19px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
padding-right: 15px;
padding-left: 15px;
}
<button class="btn">My bouton</button>
As long as the button width is determined by the text width you can only try to manipulate the padding so it fits again.
If its no problem to give the button a width depending on its parent or a fixed width you can try this:
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
width: 95px;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>
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:
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>
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;
}
I was designing a nav bar button, when I got a specificity conflict in the opacity. I used the !important override, but that doesn't seem to be working. Any clues as to the reason?
HTML:
<body>
<div class="container">
<span id="text">Lorem Ipsum</div>
</div>
</body>
CSS:
.container {
background-color: #000;
opacity:0;
height: 30px;
width: 122px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position:absolute;
top:40%;
left:43%;
}
#text {
color: #fff;
-moz-user-select: none;
-webkit-user-select: none;
font-family: Courier;
position:absolute;
top: 5px;
left: 5px;
width: 122px;
opacity:1; !important;
}
body {
background-color: #808080;
}
After this all I get is a blank gray background (due to the background-color styling). I know it makes much more sense to not nest the span in the div, but I need to do that for animation purposes.
must be like that :
opacity:1 !important;
no ; before !important
if .container have opacity:0 then all elements inside this div will not be visible, even if you add opacity:1 !important; to #text
First
Declare !important write this opacity:1 !important; instead of this opacity:1; !important;.
Second
you define Opacity to #text parent that's why it's take it's parent opacity. So, instead of opacity you can use RGBA().
Write like this:
.container {
background-color:rgba(0,0,0,0);
}
Filter for IE
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000); /* IE6 & 7 */
zoom: 1;