1)I want to change "submit" button border in circle shape as below image as here
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Add border-radius to round shape.
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius:8px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Just add border-radius as required
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 5px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
<button class="submit1">
Upload Picture
</button>
Try this one
You just want to add border-radius: 50px;
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 50px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
<button class="submit1">Submit</button>
you need to put a container div to your button,
<div style="border:5px solid gray;background-color:gray;max-width: 140px;">
<input type="button" class="submit1" value="submit" />
</div>
css
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 10px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Use like this, and use correct image, i just put sample image from online
<!DOCTYPE html>
<html>
<style>
.submit1 {
background-color: #ff7704;
border: medium none;
border-radius: 10px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 15px;
padding-right:70px;
min-width: 140px;
background-image:url('http://troncell.com/images/hdsp/ht-icon-1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
</style>
<body>
<button class="submit1">Upload Picture</button>
</body>
</html>
Related
How can I display this CSS icon using only a single DIV? I thought of a linear gradient as background, but I couldn't realize it myself until now.
Here you can see that it should work theoretically (of course with different colors).
How to color a single div with 3 different colors? (one third blue, one third white, one third red)
The first snippet shows how it should look, the second snippet is a very bad trial from me and somehow it does not turn out as it should even the hover effect fails... does anyone can get the whole thing right to work?
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
<div class="whitepaper">
<div class="blackframe">URL</div>
</div>
<div class="whitepaper">
<div class="blackframe">URL</div>
</div>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 10px, black 1px, white);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size: 12px;
font-weight: bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
<div class="whitepaper">URL</div>
The way linear-gradient works is that the colors and values you list are stops, and CSS automatically fills in the space in between and blends it in a gradient. As mentioned in the linked question, the way to get sharp, instant transitions between colors is to create two stops at the same location: one with the old color, and one with the new. That way, there is no "in-between" space to fill with a gradient. You basically just list the starting and ending points for each color as stops, which is what I did here.
The reason your background colors weren't getting overridden on :hover is that you used background-color under the :hover selector, which doesn't override a linear-gradient. If you switch it to background, as I did, it works fine. I believe this sample works identically to the example you gave. You can adjust the px values in the linear-gradient if I didn't get them perfect.
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size: 12px;
font-weight: bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
<div class="whitepaper">URL</div>
Made some small changes. Changed the linear gradient into something opaque and added background sizing.
You can adjust the black part's size with background-size.
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background-color: white;
background-image: linear-gradient(to right, rgba(0, 0, 0, 100) 50%, rgba(0, 0, 0, 100) 50%);
background-size: 100% 50%;
background-position-y: center;
background-repeat: no-repeat;
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size:12px;
font-weight:bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
<div class="whitepaper">URL</div>
I have designed an input button in SCSS
.editButton /* button in edit window */
{
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
.fullWidth
{
width: 100% !important;
}
}
which is leading into css file
.editButton {
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
}
.editButton .fullWidth {
width: 100% !important;
}
My HTML
<input type = "button" id = "pmLettersEditFilterSend" class = "editButton fullWidth" value = "...">
But the fullWidth is not assigned to the element. Webdevelopers output:
<input type="button" id="pmLettersEditFilterSend" class="editButton fullWidth" value="Create Letter">
and the Filter styles:
element {
}
.editButton {
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
}
.pmLettersFilterFilterTitleDiv {
text-align: left;
font-weight: bold;
font-size: 12px;
color: var(--filter-accordeon-button-text-color);
}
#pmLettersEditTemplateDiv {
font-weight: bold;
font-size: 12px;
}
So what am I doing wrong?
It's because you are actually selecting a child element instead of the same element in your scss. It should be:
.editButton /* button in edit window */
{
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
&.fullWidth
{
width: 100% !important;
}
}
I have a requirement of displaying the image/icon on top of the modal box in a semicircle. Though I have achieved it with the help of below code, but the only issue is whenever my form in the modal box goes for a validation check, displaying any error, my semicircle doesn't get adjusted accordingly, rather it stays at its position. Here, I have attached the screen shot of what exactly I am looking for and HTML/css code I have used to display the semicircle with image/icon at the top.
.modal {
font-family: Avenir-Medium;
font-size: 16px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
display: block;
/*Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.3);
/* Black w/ opacity */
-webkit-animation-name: slideIn;
/* Fade in the background */
-webkit-animation-duration: 2.0s;
/* Fade in the background */
;
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 92%;
left: 14px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
border-radius: 16px 16px 0px 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
top: auto;
}
.modal-wrapper {
line-height: 45px;
border: 1px solid #e7e9ea;
border-radius: 6px 6px 0px 0px;
background-color: white;
margin: auto;
}
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border-left: 1px solid #e7e9ea;
border-top: 1px solid #e7e9ea;
border-right: 1px solid #e7e9ea;
border-bottom: 3px solid white;
bottom: 300px;
}
.close-btn {
position: absolute;
vertical-align: top;
top: 4px;
left: 320px;
width: 18px;
height: 18px;
}
.container-div-creditCard {
margin: 12px 20px 0px 20px;
}
.container-div-creditCard>img {
position: absolute;
bottom: 154px;
right: 30px;
}
.credit-card-modal-label {
font-family: AvenirHeavy;
font-size: 13px;
color: #1d3444;
text-align: center;
font-weight: 200;
height: 24px;
margin-left: 31px;
}
.input-modal {
width: 100%;
height: 44px;
}
.input-spacing {
margin-top: 15px;
}
.credit-input-modal {
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
padding: 13px 42px 12px 15px;
}
.credit-expiry-input-modal {
padding: 13px 27px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
display: inline-block;
line-height: initial;
width: 65%;
height: 44px;
}
.credit-cvc-input-modal {
width: 30%;
padding: 17px 5px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
height: 44px;
}
.cvvDisc {
-webkit-text-security: disc;
}
.credit-submit-button {
width: 100%;
padding: 13px;
margin-top: 15px;
border: solid 1px #e7e9ea;
border-radius: 5px 5px 5px 5px;
background: linear-gradient(to right, #e32490, #ed1a3d);
color: white;
margin-bottom: 20px;
font-family: Avenir-Book;
font-weight: normal;
font-size: 14px;
line-height: initial;
}
.errorMsg {
font-family: Avenir-Book;
font-weight: normal;
color: #ED1A3D;
font-size: 12px;
}
<div id="modalCCDetails" class="modal">
<div class="modal-content modal-wrapper">
<div class="container-div-creditCard">
<label class="credit-card-modal-label">ENTER YOUR CREDIT CARD DETAILS</label>
<input name="cc_name" class="input-modal credit-input-modal" type="text" placeholder="Name printed on Credit Card" onChange={this.handleUserInput} />
<span class="errorMsg"></span>
<input name="cc_number" class="input-modal credit-input-modal input-spacing" type="tel" maxLength="16" onKeyPress={(e)=> this.handleCCOnKeyPress(e)} placeholder="16 digit credit card number" />
<span class="errorMsg"></span>
<input name="cc_expDate" class="credit-expiry-input-modal" type="text" placeholder="Expiry MM-YYYY" />
<div class="device-divider" />
<input name="cc_cvc" class="credit-cvc-input-modal cvvDisc" type="tel" placeholder="CVC" maxLength="3" />
<span class="errorMsg"></span>
</div>
<button class="credit-submit-button">Submit Payment</button>
</div>
</div>
</div>
NOTE: This is a mobile view screenshot
Just adjust your css code into something like this:
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border: 1px solid #e7e9ea;
border-bottom: 3px`enter code here` solid white;
top: -48px;
}
Just remove the bottom: 300px; and replace with top: -48px; or any value that you want.
please add top:-15px; and removed bottom:300px; in class .modal-wrapper::after { top: -15px; }, u will see the image move up
I'm trying to create a button and here is the demo so far.
Right now I can't figure out how I can position the sprite image so that only the black icon is visible.
Does anyone know how I can fix this?
This is what I want to achieve with the button:
No hover:
Hover:
Here is the code I have:
HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. Here is a jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either:
a. reduce the height of the button;
b. increase the vertical gap between the two sprites in the image itself;
c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
You can provide image display position as follows:
display:inline-block
I need to make a box using css containing arc as shown in image . I want to do this using pure CSS. I am able to make arcs but not able to draw line. Here is my html and css code.
<style type="text/css">
.left_arc{
border-bottom: 1px solid #D0BFA6;
border-radius: 0 0 360px 0;
border-right: 1px solid #D0BFA6;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.right_arc{
border-bottom: 1px solid #D0BFA6;
border-left: 1px solid #D0BFA6;
border-radius: 0 0 0 360px;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 88px;
}
</style>
<div class="main_style">
<div class="left_arc"></div>
<div class="text_arc">Canada</div>
<div class="right_arc"></div>
</div>
Here is the output of my code.
LIVE DEMO
Simplify your HTML markup
and create crazy things using the CSS pseudo :before and :after selectors
HTML
<div class="main_style">
<div class="text">Canada</div>
</div>
<div class="main_style">
<div class="text">USA</div>
</div>
CSS:
.main_style {
background: none repeat scroll 0 0 #FEEEEA;
font: italic normal normal 16px/1em Times, "Times New Roman", serif;
text-transform: uppercase;
text-align:center;
letter-spacing: 1px;
color: #A29061;
position:relative;
overflow:hidden;
float: left;
}
.text{
border: 1px solid #D0BFA6;
padding:8px 20px 4px;
}
.main_style:before, .main_style:after{
content:'';
position:absolute;
top:-13px;
width:24px;
height:24px;
background:#fff;
border: 1px solid #D0BFA6;
border-radius: 42px;
}
.main_style:before{
left:-13px;
}
.main_style:after{
right:-13px;
}
You can just create a border with negative radius for only the top corners. See this post for more info...
Add extra Corner class to your left_arc and right_arc divs.
That will be shown in this JSBin.
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 100px;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.left_arc {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.right_arc {
top: -1px;
left: 110px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.main_style {
position: relative;
margin: 30px;
width: 119px;
height: 28px;
background: #ccc;
border: 1px solid #333;
}