After much poking around online, I've found lots of advice and examples for using CSS to style submit buttons, but they all result in rectangular buttons. I want to make a non-rectangular button that automatically sizes itself to fit the button legend. Specifically, I want the button to look like this (plus or minus the rounded corners):
Any suggestions?
Totally possible with border radius, but you will have to submit with JavaScript instead of the <button> element.
For instance:
.icon {
background-color: lightblue;
width: 100px;
padding: 4px;
margin: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 60px 22px;
-moz-border-radius-topright: 60px 22px;
border-bottom-right-radius: 60px 22px;
-moz-border-radius-bottomright: 60px 22px;
}
Makes:
See it live:
http://jsfiddle.net/9zamA/
You could use the CSS border triangle trick: http://css-tricks.com/snippets/css/css-triangle/
You could use svg.
Related
I have revolution Slider on a Wordpress CMS. I've implemented custom css in the Revolution Slider panel. When you first load the page the slider is rounded on the top left and bottom right, but when you resize the window (just a little bit) the rounded corners disappear! I cannot find the culprit, the responsiveness should continue to work with the custom css, but it does not. Thank you for any help.
https://www.superherodigital.com/livescan/
Code that I'm using.
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
no need for these complicated tasks ...
Just follow the path below in Direct Admin and ... (file manager)
path:
example.com/wp-content/plugins/revslider/public/assets/css/rs6
open rs6
use ctrl+f and search rs-module
rs-module { position:relative;overflow:hidden;display: block;border-radius:25px }
put border-radius:25px or anything 35px , 45px ....... like up line ...
This is probably something to do with the slider declaring the CSS properties in JS (dynamically changing the DOM properties), removing any applied styles in your stylesheet. I can see you're applying these declarations on #rev_slider_1_1_wrapper.
I would add a class to this instead, and apply the border radius to a new class.
.rev-slider-border-radius {
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
}
Then add the class to the slider wrapper element if it is in your HTML:
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container avada-skin-rev-nav rev-slider-border-radius"> ... </div>
Or, if the JS is generating this, apply the class via JS after the slider has been initialised:
$(function() {
$('.rev_slider_wrapper').addClass('rev-slider-border-radius');
});
You can add a wrapper around the slider revolution slider with the class roundedslider where the roundedslider class has following style attributes:
.roundedslider{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
position: relative;
z-index: 1;
overflow: hidden;
}
This works perfect in the example here also: http://revolution.themepunch.com/home-slider-boxed/
All other questions about ThemePunch products are answered at http://themepunch.com/support-center
Hope this helps you further ?
To me this is working fine, just substitute your slider and the radius you like on the corners:
.rev_slider, .rev_slider_wrapper, .rev_slider_wrapper img, .tp-revslider-mainul, .tp-revslider-slidesli
{
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}
I am looking at adding a border-top, 20px solid red;, and I want the bottom of this to be rounded. With the following it does seem to be working for me.
-moz-border-radius-bottomright: 12px 12px;
border-bottom-right-radius: 12px 12px;
-moz-border-radius-bottomleft: 12px 12px;
border-bottom-left-radius: 12px 12px;
How can I do it?
I'm not sure why you aren't able to produce the result, but the above code looks correct. I've provided a JS Fiddle example, and mine works. I'm assuming you added the border-top property to the box. I don't think you need two values for each border-property. Hope this helps.
Create a new layer object with an ID of box and apply the following CSS. If you add a paragraph within the box the border will not appear.
http://jsfiddle.net/brownlace/kEvrE/1/embedded/result/
/* css3 rounded corners */
#box {
border-top: 20px solid red;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
}
I suggest you to use border instead of border-top to make sure the property is applied to all borders.
border: 20px solid red;
In this case you can use border-bottom-left-radius: 12px; with one value because both are the same.
Also you can add vendor property for webkit:
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
Here is a fiddle.
Having a bit of an issue with border-radius. I have successfully rounded off my rectangle, but I am having an issue with rounding the hover that I have placed over it. You will see in the top and bottom corners of the rounded rectangle the hover itself is not rounded and is actually a rectangle. I have tried rounding it but it rounds the center as well. I know this probably doesn't make sense but you will understand by looking here: http://jsfiddle.net/hCg3J/
All I want to do is to have each selection highlight the whole of that area, and not stick out.
HTML:
<ul class="pageitem">
<li class="list" style="border-top:none;">iPhone 4/4S</span><div class="arrow"></div></li>
<li class="list">iPhone 3G/3GS</span><div class="arrow"></div></li>
<li class="list">iPod Touch</span><div class="arrow"></div></li>
</ul>
CSS
.pageitem {
-webkit-border-radius: 8px;
behavior: url(/border-radius.htc);
border-radius: 8px;
position:relative;
zoom: 1;
-moz-border-radius: 8em;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #fff;
border: #878787 solid 1px;
font-size: 12pt;
overflow: hidden;
padding: 0;
height: auto;
width: auto;
margin: 3px 9px 17px;
list-style: none
}
Just add proper -webkit-border-radius in .list:hover, name:hover and adjust it to your needs.
Here is a jsfiddle proof of concept. What you need to do is to round only top-left and top-right corner for top element and bottom-left, buttom-right for the bottom element. I would suggest adding a special class for these elements.
UPDATE:
Actually as I suggested in comment I have added first-child and last-child selectors, updated fiddle
.list:hover:first-child, name:hover:first-child {
-webkit-border-radius: 8px 8px 0px 0px;
}
.list:hover:last-child, name:hover:last-child {
-webkit-border-radius: 0px 0px 8px 8px;
}
could anyone tell me why, if i use border-radius: 10px it doesn't round all the edges the same?
#portfolio1
{
background-image:url("images/bg.png");
background-repeat: none;
height: 150px;
width: 300px;
float: left;
margin-top:10px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
border-radius: 10px;
/*border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;*/
/*-webkit-border-radius: 20px;*/
}
Notice I've commented a few lines of css where I was trying different things. I seems that if I to the individual border values to different for left and right edges it looks okay but still has something wrong with it.
Also the same with the webkit one. I'm using chrome, did try it with firefox as well but got the same problem. Could it be to do with the margin values I'm using? also I have portfolio1, portfolio2 and portfolio3 which are all very similar, but when displayed on my webpage I'm using each of them twice..... If that makes a difference.
Thanks for the help.
If you wanted to make all the edges round at 10px then you don't need to have it be so complicated (specifying topright,topleft,etc.)
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Here's a very useful tool you can use.
I want to make the title box auto-width, but I don't get it. Cannot post any Screenshots. My Css Code for the blogpost title is actually like this:
section#maincontent header{
position: relative;
left: 25px;
padding-left: 10px;
background: #e5e5e5;
margin-top: 50px;
padding-top: 0px;
padding-bottom: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: 1px solid #CCCCCC;
}
Need help! Thanks!
If you post your HTML code we'd probably be able to help you better, but in general a div is a block level element, so it will automatically expand to the width of its containing element. If you want the title to appear in a box that is as wide as the title itself (with a little padding) consider changing the div to display:inline, styling the title itself, or wrap it in an inline-element such as a span.
JSFiddle: http://jsfiddle.net/DHW7Y/7/