I have a problem that if i skew the button to -15deg. Its tilt like itlaic font style but when the button tilt the text inside the button also got tilt(italic).
I want to know that how is it possible that if the button is tilt(italic) then the text should be in normal font style.
now its showing like this . I want button should be like this but text shouldn't be like this it should be normal.
i follow this answer but this is not working for me. font style should be normal
Is there any problem in my code below:
HTML:
<input id="btn" type="submit" value="BUTTON IS THIS">
CSS:
#btn{
background-color:#29b6f6;
color:#fff;
transform: skewX(-15deg);
font-style:normal;
}
You may add a transformation to a nested element:
HTML:
<button id="btn" type="submit"><span>BUTTON IS THIS</span></button>
CSS:
#btn{
background-color:#29b6f6;
color:#fff;
transform: skewX(-15deg);
}
#btn span {
display: block;
transform: skewX(15deg);
}
I want to put text in "p" into center of my "div". My html is like this:
<div class="picture">
<img src="/sites/default/files/default_images/colorful-triangles-background_yB0qTG6.jpg" width="1080" height="1920" alt="background to view" typeof="foaf:Image">
</div>
<p class="textik"">Hello handsome.</p>
But i cant change html tags. I can only us CSS. Is there a way to do this? I tried some ways, but none seems to work.
The only way to do this without changing the HTML is to artificially align the p tag above the div tag like so.
p.textik {
margin-top: -5px;
}
Adjust as needed, and test for mobile devices.
If you don't want the elements underneath to move up as well, you can use either padding-bottom to prevent this.
p.textik {
padding-bottom: 5px;
}
I'm assuming you actually want to make the p tag appear in the centre of your image, so you can position it absolute and transform it's location using css. By using absolute positioning and transforming the location you don't need to reposition should the size of your image/outer elements change. Something like:
<div class='someOuterElement'>
<div class="picture">
<img src="http://placehold.it/500/500" width="500" height="500" >
</div>
<p class='textik'>Hello handsome.</p>
</div>
and style it with:
.someOuterElement {
position: relative;
width: 500px
}
.textik {
text-align; center;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%)
}
There's more info about css transform here
I have a button with a icon . The icon is hidden . When I hover on the button the icon appears . transform is working fine on the button . But on the text it is not working .
Code
.btn.btn-rolling{
overflow: hidden;
position: relative;
}
.btn.btn-rolling i{
transform: translateX(-30px);
}
.btn.btn-rolling span{
transform: translateX(-30px);
}
<button class="btn btn-rolling"><i class="fa facebook"></i><span>Click me</span></button>
Hi you don't need to transform the text. If you are adding the property to button so span inside the button will also have the transform property.
Look This :
http://jsfiddle.net/Saiyam/o1L6p20d/3/
This will work by using table-properties.
I have a HTML code as
<div class="fl">
<div class="titleTextV">My ABC</div>
</div>
Now I have applied the CSS to rotate text as;
.titleTextV{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:1.3em;
background:#999;
height:100%;
}
I want this titleTextV class to span the entire height of its
container 100%, no px value and be positioned inside, but currently the text is moving out of the box.
If you user jQuery try this:
$('.fl').height($('.titleTextV').width());
And add display: inline-block; to your titleTextV class.
Live example at jsFiddle:
I'm trying to show a simple button, with an image on it, like this:
<button type="button" style="width: 23px; height: 23px; padding:0">
<img src="Icon_304.png" />
</button>
The button looks right in Chrome, but is off a bit in Firefox—it's not horizontally centered, but skewed to the right. A FF screenshot is below. How can I get the image to be centered (like it is in Chrome by default)? I tried adding a margin: 0 to the img, to no avail.
The best way to do this is not to set the dimensions of the button, but to simply rely on padding. Obviously you should put these styles into a style sheet, as shown below.
DEMO: http://jsfiddle.net/QgTkt/4/
.tallButton {
padding: 50px 10px;
}
.wideButton {
padding: 10px 50px;
}
.equalButton {
padding: 10px;
}
<button type="button" class="equalButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="wideButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="tallButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
You can also set absolute position for the image and negative translate, this way you are able to set any size of the button without changing the padding again.
.tallButton{
position:relative;
width:200px;
height:200px;
}
.tallButton img {
position:absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
http://jsfiddle.net/QgTkt/292/
Set the image as background image of the button.
<button class="enjoyable"></button>
.enjoyable {
background-image: url("./icon.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Demo: http://jsfiddle.net/x7j4o0uh/1/
I threw this together pretty quickly, so it still needs some tweaking, but you can give this a shot... http://jsfiddle.net/GGXaP/3/
This script (using jQuery) handles the user interaction by adding/removing CSS classes as needed:
(function($) {
$(document).ready(function() {
$('.imageButton').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('.imageButton').mousedown(function() {
$(this).addClass('mouseDown');
});
$('.imageButton').mouseup(function() {
$(this).removeClass('mouseDown');
});
});
}(jQuery));
Then it's just a matter of setting up CSS to make the button look the way you like. The one in my example is pretty rough (I'm a "make it work" guy - not a "make it pretty" guy), but it's a start.
To solve this issue on Chrome I just added align-items : center on my button.
By default Chrome sets align-items : flex-start on all buttons, which aligns all elements inside the button on the left side, by overloading this property the picture inside my button is now centered.
Instead of giving height or width to button or image give padding to button so it will align that image to center
<button type="button" style="padding:10px">
<img src="test/images/searchIcon.png">
</button>
button {
display: grid;
align-items: center;
}
Inspiration: [1]