Moderator
Jan Dembowski
(@jdembowski)
Forum Moderator and Brute Squad
Link to site? I’m not too familiar with that theme but I wouldn’t mind looking at it with Chrome’s Inspect Element tool.
Thanks Jan.
My site is darioalfonsi.com.
But the question is generic to Customizr: all the buttons are shaded and rounded—as is the “Follow @wordpress” button at the bottom of this page.
I’d like to move more towards the design of iOS 7, which gets rid of a lot of buttons, favouring simple text instead (e.g. the Learn more > “button” on Apple’s site.
But I don’t know enough about Customizr’s design to remove all the colours/rounding.
On your site, the button styling sems to be controlled by:
.btn-primary {
background-color: #EE7C2A;
background-image: linear-gradient(to bottom, #F78C40, #E16309);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: whitesmoke;
background-image: linear-gradient(to bottom, white, #E6E6E6);
background-repeat: repeat-x;
border-color: #CCCCCC #CCCCCC #B3B3B3;
border-image: none;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333333;
cursor: pointer;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
padding: 4px 12px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
}
Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. It make life a lot easier. 🙂
Thanks Esmi!
I’m getting the hang of Firebug already, but somehow assumed buttons were more complicated. I’ll have a play with what you’ve given me.
Well, I now have this for my front page buttons!:
.btn-primary {
color: #f67d28;
text-shadow: none;
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7F516764' , endColorstr='#7F516764');
border-color: transparent;
*background-color: transparent;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: none;
*border: 0;
border-bottom-color: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
*margin-left: .3em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-style: none;
border-width: 0;
font-size: 18px;
line-height: 100%;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #777777;
background-color: transparent;
*background-color: transparent;
text-decoration:none;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
text-decoration: none;
}
.btn.active, .btn:active {
box-shadow: none;
}
Don’t know how correct it is, but it works. Will gradually work on the other buttons.
