I'd to like to setup a rounded button with an ionic icon in the center.
I have something like that:
button {
color: white;
&.button-rounded {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid white;
border-radius: 50%;
color: white;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: bold;
}
}
And the html:
<button class="button button-clear icon ion-home button-rounded"></button>
But the result is something like that:
Any help, please?
The problem is with the font size of the icon which is bigger than the rounded button. You can reduce the font-size to 24px and line-height to the same value in order to fit the icon exactly inside the circle. Increased the specificity of the overriding selector to avoid !important
.bar .buttons .button.button-icon .icon::before, .bar .buttons .button.button-icon::before, .bar .buttons .button.button-icon.icon-left::before, .bar .buttons .button.button-icon.icon-right::before {
font-size: 24px;
line-height: 24px;
}
Updated Codepen
SASS version:
.bar .buttons .button.button-icon {
.icon::before, &::before, &.icon-left::before, &.icon-right::before {
font-size: 24px;
line-height: 24px;
}
}
Related
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
I would like to make my arrow tinnier. I was not able to change the font-weigth so not sure what to do. This is my code.
button {
height: 50px;
width: 50px;
font-size: 40px;
border: none;
background-color: transparent;
outline: none;
color: #000;
}
<button class="left-button" onclick="plusDivs(-1)">❮</button>
You should use font-awesome icon.
.slideshow .buttons button{
height: 50px;
width: 50px;
font-size: 40px;
font-weight:normal;
border: none;
background-color: transparent;
outline: none;
color: white;
}
If you want to keep the icon that you have and not use a font awesome icon like the above then do this:
.left-button {
font-size: 20px; (adjust as needed)
transform: scale(.5, 1); (adjust as needed)
}
Link about transform scale property: https://www.bitdegree.org/learn/css-transform
Demo:
Before: https://jsfiddle.net/ne7mpufj/1/
After: https://jsfiddle.net/ekhm14r0/2/
You'll have to adjust the values in the font-size and transform scale property as needed but that should help get it working for you.
I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?
This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode.
See code below
body {
background: grey;
}
i {
position: relative;
display: inline-block;
}
i::before{
content: "\1F0B1";
font-style: normal;
color: white;
display: block;
line-height: 0.8;
font-size: 150px;
background: green;
letter-spacing: -10px;
text-indent: -10px;
}
<i class="heart"></i>
You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.
i {
background: green;
font-style: normal;
padding: 2px 4px;
}
i::before {
content: "\1F0B1";
color: white;
}
<i class="heart"></i>
I have applied two different styles for two different text buttons.
.BC {
background-color : DC143C;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
.DE {
background-color : black;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
The look and feel of the buttons are great in Mozilla,chrome,Opera and Safari browser with the expected colour changes(ie the button appers with default length and the text is wrapped inside it).But in IE8 and IE9 the color is applied only upto the text what I have mentioned and adjusts itself with the buttton structure.
Can you please help me with this?
Hey used to # before in color
as like this
background-color : #DC143C;
and replace this one
.BC{background-color : #DC143C;}
I need to change the color of a button on hover.
Here is my solution, but it doesn't work.
a.button {
display: -moz-inline-stack;
display: inline-block;
width: 391px;
height: 62px;
background: url("img/btncolor.png") no-repeat;
line-height: 62px;
vertical-align: text-middle;
text-align: center;
color: #ebe6eb;
font-family: Zenhei;
font-size: 39px;
font-weight: normal;
font-style: normal;
text-shadow: #222222 1px 1px 0;
}
a.button a:hover{
background: #383;
}
a.button a:hover means "a link that's being hovered over that is a child of a link with the class button".
Go instead for a.button:hover.
Seems your selector is wrong, try using:
a.button:hover{
background: #383;
}
Your code
a.button a:hover
Means it is going to search for an a element inside a with class button.
a.button:hover{
background: #383; }
works for me but in my case
#buttonClick:hover {
background-color:green; }