Button always square with variable height [duplicate]
up vote
-1
down vote
favorite
This question already has an answer here:
Bootstrap 4 square grid
3 answers
Maintain the aspect ratio of a div with CSS
21 answers
I'm building some global button classes for a CSS framework, and I'm wondering if there's any way to set an element's width to be the same as the height without hard-coding it.
Here's an example of how it would work:
HTML
<button class="button square-button">OK</button>
<div class="container">
<button class="button large-button square-button">OK</button>
</div>
CSS
.button {
height: 50px;
padding: 0 20px;
}
.square-button {
width: (always-same-as-height);
padding: 0; // Disable padding so it becomes a square
}
...
.container {
height: 100px
.button {
height: inherit;
}
}
In some scenarios I want to be able to set the height depending on the container height, and have all the buttons with the square-button class dynamically resize to that height while still staying a perfect square shape.
Is this possible using only CSS?
css css3
asked Nov 8 at 16:56
Swen
3161420
marked as duplicate by Andrei Gheorghiu css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 2:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
-1
down vote
favorite
This question already has an answer here:
Bootstrap 4 square grid
3 answers
Maintain the aspect ratio of a div with CSS
21 answers
I'm building some global button classes for a CSS framework, and I'm wondering if there's any way to set an element's width to be the same as the height without hard-coding it.
Here's an example of how it would work:
HTML
<button class="button square-button">OK</button>
<div class="container">
<button class="button large-button square-button">OK</button>
</div>
CSS
.button {
height: 50px;
padding: 0 20px;
}
.square-button {
width: (always-same-as-height);
padding: 0; // Disable padding so it becomes a square
}
...
.container {
height: 100px
.button {
height: inherit;
}
}
In some scenarios I want to be able to set the height depending on the container height, and have all the buttons with the square-button class dynamically resize to that height while still staying a perfect square shape.
Is this possible using only CSS?
css css3
asked Nov 8 at 16:56
Swen
3161420
marked as duplicate by Andrei Gheorghiu css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 2:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Not really possible with pure CSS, it could be worthwhile looking at a tool such as SASS as it allows you to create variables.
– snack_overflow
Nov 8 at 16:58
How exaclty will a preprocessor know what the element'swidthwill be, @snack? The requirement was: "without hard-coding". Variables are just a fancy way of hard-coding, because you hard-copy in one place and it gets applied everywhere you used it. OP seems to want a solution which adapts to current elementwidth, using CSS.
– Andrei Gheorghiu
Nov 8 at 19:30
I wasn't able to find a proper definition for "pure CSS". Can you please help me out on this one? Providing an example of "impure CSS" will do just fine, as long as it helps clear the confusion.
– Andrei Gheorghiu
Nov 8 at 19:35
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
This question already has an answer here:
Bootstrap 4 square grid
3 answers
Maintain the aspect ratio of a div with CSS
21 answers
I'm building some global button classes for a CSS framework, and I'm wondering if there's any way to set an element's width to be the same as the height without hard-coding it.
Here's an example of how it would work:
HTML
<button class="button square-button">OK</button>
<div class="container">
<button class="button large-button square-button">OK</button>
</div>
CSS
.button {
height: 50px;
padding: 0 20px;
}
.square-button {
width: (always-same-as-height);
padding: 0; // Disable padding so it becomes a square
}
...
.container {
height: 100px
.button {
height: inherit;
}
}
In some scenarios I want to be able to set the height depending on the container height, and have all the buttons with the square-button class dynamically resize to that height while still staying a perfect square shape.
Is this possible using only CSS?
css css3
asked Nov 8 at 16:56
Swen
3161420
This question already has an answer here:
Bootstrap 4 square grid
3 answers
Maintain the aspect ratio of a div with CSS
21 answers
I'm building some global button classes for a CSS framework, and I'm wondering if there's any way to set an element's width to be the same as the height without hard-coding it.
Here's an example of how it would work:
HTML
<button class="button square-button">OK</button>
<div class="container">
<button class="button large-button square-button">OK</button>
</div>
CSS
.button {
height: 50px;
padding: 0 20px;
}
.square-button {
width: (always-same-as-height);
padding: 0; // Disable padding so it becomes a square
}
...
.container {
height: 100px
.button {
height: inherit;
}
}
In some scenarios I want to be able to set the height depending on the container height, and have all the buttons with the square-button class dynamically resize to that height while still staying a perfect square shape.
Is this possible using only CSS?
This question already has an answer here:
Bootstrap 4 square grid
3 answers
Maintain the aspect ratio of a div with CSS
21 answers
css css3
css css3
asked Nov 8 at 16:56
Swen
3161420
asked Nov 8 at 16:56
Swen
3161420
edited Nov 9 at 13:44
asked Nov 8 at 16:56
Swen
3161420
asked Nov 8 at 16:56
Swen
3161420
asked Nov 8 at 16:56
Swen
3161420
3161420
marked as duplicate by Andrei Gheorghiu css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 2:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Andrei Gheorghiu css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 2:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Not really possible with pure CSS, it could be worthwhile looking at a tool such as SASS as it allows you to create variables.
– snack_overflow
Nov 8 at 16:58
How exaclty will a preprocessor know what the element'swidthwill be, @snack? The requirement was: "without hard-coding". Variables are just a fancy way of hard-coding, because you hard-copy in one place and it gets applied everywhere you used it. OP seems to want a solution which adapts to current elementwidth, using CSS.
– Andrei Gheorghiu
Nov 8 at 19:30
I wasn't able to find a proper definition for "pure CSS". Can you please help me out on this one? Providing an example of "impure CSS" will do just fine, as long as it helps clear the confusion.
– Andrei Gheorghiu
Nov 8 at 19:35
add a comment |
1
Not really possible with pure CSS, it could be worthwhile looking at a tool such as SASS as it allows you to create variables.
– snack_overflow
Nov 8 at 16:58
How exaclty will a preprocessor know what the element'swidthwill be, @snack? The requirement was: "without hard-coding". Variables are just a fancy way of hard-coding, because you hard-copy in one place and it gets applied everywhere you used it. OP seems to want a solution which adapts to current elementwidth, using CSS.
– Andrei Gheorghiu
Nov 8 at 19:30
I wasn't able to find a proper definition for "pure CSS". Can you please help me out on this one? Providing an example of "impure CSS" will do just fine, as long as it helps clear the confusion.
– Andrei Gheorghiu
Nov 8 at 19:35
1
1
Not really possible with pure CSS, it could be worthwhile looking at a tool such as SASS as it allows you to create variables.
– snack_overflow
Nov 8 at 16:58
Not really possible with pure CSS, it could be worthwhile looking at a tool such as SASS as it allows you to create variables.
– snack_overflow
Nov 8 at 16:58
How exaclty will a preprocessor know what the element's
width will be, @snack? The requirement was: "without hard-coding". Variables are just a fancy way of hard-coding, because you hard-copy in one place and it gets applied everywhere you used it. OP seems to want a solution which adapts to current element width, using CSS.– Andrei Gheorghiu
Nov 8 at 19:30
How exaclty will a preprocessor know what the element's
width will be, @snack? The requirement was: "without hard-coding". Variables are just a fancy way of hard-coding, because you hard-copy in one place and it gets applied everywhere you used it. OP seems to want a solution which adapts to current element width, using CSS.– Andrei Gheorghiu
Nov 8 at 19:30
I wasn't able to find a proper definition for "pure CSS". Can you please help me out on this one? Providing an example of "impure CSS" will do just fine, as long as it helps clear the confusion.
– Andrei Gheorghiu
Nov 8 at 19:35
I wasn't able to find a proper definition for "pure CSS". Can you please help me out on this one? Providing an example of "impure CSS" will do just fine, as long as it helps clear the confusion.
– Andrei Gheorghiu
Nov 8 at 19:35
add a comment |
1 Answer
1
active
oldest
votes
up vote
-1
down vote
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
answered Nov 8 at 18:02
Kaashan
8716
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
-1
down vote
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
answered Nov 8 at 18:02
Kaashan
8716
add a comment |
up vote
-1
down vote
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
answered Nov 8 at 18:02
Kaashan
8716
add a comment |
up vote
-1
down vote
up vote
-1
down vote
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
answered Nov 8 at 18:02
Kaashan
8716
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
answered Nov 8 at 18:02
Kaashan
8716
answered Nov 8 at 18:02
Kaashan
8716
answered Nov 8 at 18:02
Kaashan
8716
answered Nov 8 at 18:02
Kaashan
8716
8716
add a comment |
add a comment |
1
Not really possible with pure CSS, it could be worthwhile looking at a tool such as SASS as it allows you to create variables.
– snack_overflow
Nov 8 at 16:58
How exaclty will a preprocessor know what the element's
widthwill be, @snack? The requirement was: "without hard-coding". Variables are just a fancy way of hard-coding, because you hard-copy in one place and it gets applied everywhere you used it. OP seems to want a solution which adapts to current elementwidth, using CSS.– Andrei Gheorghiu
Nov 8 at 19:30
I wasn't able to find a proper definition for "pure CSS". Can you please help me out on this one? Providing an example of "impure CSS" will do just fine, as long as it helps clear the confusion.
– Andrei Gheorghiu
Nov 8 at 19:35