I have several QPushButtons that are located beside each other. Each button has a padding of 8px on the left and the right side. When one of them has focus I change the background-color. So far it looks fine:
In addition to the background-color change I want to apply a border of 2px in white. When I do that the text seems to be cut off by the size of my border. So with a border of 2px it looks like this:
When I increase the border-size to, for example, 4px my text vanishes completely because the button does not increase it's size correctly.
I use the following CSS in Qt:
QPushButton {
background-color: transparent;
border-style: none;
font: bold 12px;
color: white;
padding-left: 8px;
padding-right: 8px;
}
QPushButton:focus {
background-color: blue;
border-style: solid;
border-width: 2px;
border-color: white;
}
Edit, Solution from Rushi:
The idea is to define the border for the original (non-focused) button with a transparent color. When it receives focus the width of the button seems to be computed correctly. I don't know why Qt computes it correctly in this case, but it works for me :-)
CSS with the fix:
QPushButton {
background-color: transparent;
/* we define our border here but with transparent color */
border-style: solid;
border-width: 2px;
border-color: transparent;
font: bold 12px;
color: white;
padding-left: 8px;
padding-right: 8px;
}
QPushButton:focus {
background-color: blue;
border-color: white;
}
Hello Please check below html and css code ,it will be help you to solved this issue.
<html>
<head>
<title>title</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{ background: #000; width: 400px; height: 100px; margin: 50px; padding: 50px;}
.QPushButton {
background-color: transparent;
font: bold 12px;
color: white;
padding-left: 8px;
padding-right: 8px;
border-style: solid;
border-width: 2px;
border-color: transparent;
}
.QPushButton:focus {
background-color: blue;
border-style: solid;
border-width: 2px;
border-color: white;
}
</style>
</head>
<body>
<div class="box">
3
4
</div>
</body>
</html>
You should decrease size of padding. Here is the trick:
QPushButton:focus {
....other styles.....
border-width: 2px;
padding-left: 6px;
padding-right: 6px;
}
I prefer #Evgeny's answer as sometimes you would want border on default state, so setting it to transparent won't help.
A working example:
/* default state */
QPushButton {
border: 1px solid black;
padding: 1px;
}
QPushButton:hover {
border: 2px solid black;
padding: 0px;
}
Related
I want to add the border to my button in the webpage, following is what I do.
The strange things it that the color set works, which can control the font color within the button, but the sets for the border does not work.
I have tried some solutions with highest votes, but none of them works.
.btn-general {
color: #fff;
border-color: #fff;
border-style: solid;
border-width: 2px;
border-radius: 10px;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
}
I tried you code, and it seems to be working fine. Are you using bootstrap or something like that? Because if you are, it can be that Bootstrap is overwriting your CSS. You can try putting !important behind your css lines to see if it works.
<style>
.btn-general {
color: #fff !important;
border-color: #fff !important;
border-style: solid !important;
border-width: 2px !important;
border-radius: 10px !important;
padding: 12px 26px 12px 26px !important;
font-size: 16px !important;
font-weight: 400 !important;
}
</style>
<button class="btn-general">
Test
</button>
I am trying to do some up and down arrows, which depend on stock price changes (https://jsfiddle.net/ec0x7pru/6/), they seem to be cut out due to the parent container css definition, what would be modified CSS for the triangle-up and triangle-down classes to prevent that.
.triangle-up {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid green;
bottom: 1em;
}
.triangle-down {
display: inline-block;
bottom: 1em;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid red;
}
On another note, using FF developer edition, these seem to be shaking slightly? any suggestion to fix that.
Remove padding-right:
https://jsfiddle.net/ec0x7pru/7/
And try to use this:
border-style: inset
This is a CSS-only alternative to my other answer:
.container span {
padding-right: 0.3125rem;
font-family: "NHaasGroteskDSPro-75Bd", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.125rem;
}
.triangle-up {
display: inline-block;
border-style: solid;
border-width: 0 7px 14px 7px;
border-color: transparent transparent green transparent;
bottom: 1em;
padding-right:0px !important;
}
.triangle-down {
display: inline-block;
bottom: 1em;
border-style: solid;
border-width: 14px 7px 0 7px;
border-color: red transparent transparent transparent;
padding-right: 0px !important;
}
Due to that padding, there was a plateau on the top. I've tweaked borders and overridden that.
https://jsfiddle.net/ec0x7pru/19/
Use a character instead:
<div class="container">
<span>DAX</span>
<span>3000</span>
<span id="up">▲</span><span>50.6</span>
<span>CAC 40</span>
<span>4536</span>
<span id="down">▼</span><span>-23.2</span>
</div>
https://jsfiddle.net/ec0x7pru/13/
The problem is when I set black button background, white color, white 4px border and then border-radius say 5px the black pieces appear in the corners of the button. It happens with <input> and <button> elements. <div> tags don't suffer from it.
Is it normal and does somebody know how it could be fixed?
CodePen
HTML:
<div id=a>
<div id=b>Button</div>
<br>
<input id="but1" type="button" value="Button" />
<button id="but2">Button</button>
</div>
CSS:
div#a {
background:rgb(255, 250, 204);
width:200px;
height:120px;
padding:10px;
}
div#b {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
border-radius: 5px;
text-align:center;
}
#but1 {
border: 4px solid yellow;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
#but2 {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
Thank you for your answer, robjez.
Recently I've found almost the same solution. I used padding-box for the background-clip but with the background-color instead of background. Cause with the background property it only works when the background-clip is in the end of the rule. I guess it's because of the cascading inside CSS rules. And if I use background-color it works with any order of properties.
#but1 {
padding: 5px;
width: 70px;
border-radius: 5px;
color:white;
background-clip:padding-box;
background-color: black;
border: 4px solid yellow;
}
CodePen
This is kind of browsers's bug, to avoid that you need to use background-clip, like so:
#but1 {
padding: 5px;
width: 70px;
background: black;
color:white;
border: 5px solid yellow;
border-radius: 5px;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip:padding-box;
}
This is described here and here
Hope this will help
I am trying to create 2 buttons of the same width that will look as following:
White text in a blue square with black border and with margin of lets say 5px from each side:
this is my css code:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
}
But what I am getting is:
I am using Google Chrome browser, and when I click on "inspect element" I can see all my css properties there, but my application is ignoring them.
You need to declare the border style (solid in your case)
Try the following
a.button
{
background-color: Blue;
border: 2px solid black;
color: White;
padding: 2px 5px;
width:100px;
text-align:center;
margin: 5px;
display:inline-block;
text-decoration:none;
}
You will need to adjust the css, and add hover and active states.
Example: http://jsfiddle.net/3tKS7/
Make your element an inline-block:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
display: inline-block;
}
Not sure if the capitalized color names are helping either.
How can one create a button on a website with each side being oblique (diagonals)?
I didn't find an example to show you but this is the closest I could find in 10 minutes:
http://cfl.ca/ (see the menu with tabs: News, Video, Schedule, Standings)
However, in my case, I need that sort of design for an independant button and not for a menu tab.
Here's one (imperfect) way of doing it, though it's a little mark-up heavy:
<div class="button">
<span></span>
Some button text
<span></span>
</div>
With the CSS:
.button {
width: auto;
display: inline-block;
background-color: #f00;
height: 2em;
overflow: hidden;
}
.button span:first-child {
display: inline-block;
border-top: 1em solid #fff;
border-left: 1em solid #fff;
border-bottom: 1em solid #f00;
border-right: 1em solid #f00;
float: left;
margin-right: 1em;
}
.button span:last-child {
display: inline-block;
border-bottom: 1em solid #fff;
border-right: 1em solid #fff;
border-top: 1em solid #f00;
border-left: 1em solid #f00;
margin-left: 1em;
}
.button:hover {
background-color: #0f0;
}
.button:hover span:first-child {
border-right-color: #0f0;
border-bottom-color: #0f0;
}
.button:hover span:last-child {
border-left-color: #0f0;
border-top-color: #0f0;
}
JS Fiddle demo.
I'm not yet sure why the text-is aligned to the bottom of the .button element, but it seems to be a starting point, at least. (And any edits, or comments, left that explain/improve the answer will be welcome as soon as I get back to my desk...).
Edited to revise the demo CSS:
.button {
width: auto;
display: inline-block;
background-color: #f00;
height: 2em;
line-height: 2em; /* centering the text vertically */
}
/* other stuff */
.button span:last-child {
display: inline-block;
border-bottom: 1em solid #fff;
border-right: 1em solid #fff;
border-top: 1em solid #f00;
border-left: 1em solid #f00;
margin-left: 1em;
float: right; /* removes from the 'normal flow' */
margin-top: -2em; /* aligns vertically with the top of the parent .button div */
}
Revised JS Fiddle demo.
Edited in response to Adam's (OP's) question (in comments):
...I'm trying to understand how you did it.
The idea is based around the simple premise that the join between borders is 45°, as illustrated with the following HTML/CSS:
<span id="box"></span>
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: yellow;
border-left-color: blue;
}
With the result:
JS Fiddle demo.
That being the case if two adjoining borders are coloured the same two right-angled triangles are created (using the same HTML as above):
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
}
Giving:
JS Fiddle demo.
In the example above I defined the height of the containing element (.box) as 2em, and the borders of the contained span elements as 1em (making the overall height 2em, had I given the spans their own height (or width) the shape would have become more intricate:
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
height: 30px;
}
Giving (with height):
Or, using width:
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
width: 30px;
}
Giving:
Using both width and height allows for a partially-dissected box:
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
width: 30px;
height: 30px;
}
Giving:
This could be useful for pseudo-3D frame effects, perhaps; particularly with :hover effects/changes.
I'm not sure if that's helped, much, but if you have any specific curiosities let me know in the comments, and I'll do my best to answer them. =)
Edited to add a pseudo-element, ::before/::after, solution.
The HTML is simplified somewhat to:
<div class="button">
Some button text
</div>
<div class="button">
Some more button text
</div>
<div class="button">
And yet more button text
</div>
But the CSS is rather more verbose, not complex, but certainly there seems to be more of it:
.button {
width: auto;
display: inline-block;
background-color: #f00;
height: 2em;
line-height: 2em;
position: relative;
margin-left: 3em;
}
.button::before,
.button::after {
content: '';
border-color: #f00;
border-width: 1em;
border-style: solid;
position: absolute;
top: 0;
bottom: 0;
}
.button::before {
border-top-color: transparent;
border-left-color: transparent;
right: 100%;
}
.button::after {
border-right-color: transparent;
border-bottom-color: transparent;
left: 100%;
}
.button:hover {
background-color: #0f0;
}
.button:hover::before {
border-color: #0f0;
border-top-color: transparent;
border-left-color: transparent;
}
.button:hover::after {
border-color: #0f0;
border-right-color: transparent;
border-bottom-color: transparent;
}
JS Fiddle demo.
Funnily enough thirtydot posted a link to a tutorial for this earlier today: http://www.joecritchley.com/demos/slanted-nav/
It's for a nav, but the principle should be the same.
You use oblique background images for each element, then overlap the elements to get the images to butt-up to each other visually. The only way to get around not having rectangle hit areas is to use an image map (which you probably don't want to use).
I know it's not the most "techie" answer ever but this site can generate that kind of css for you (and browser compatible if possible)