I need to set css of button like this website, where you can see the Read more button with Dark color and half shadow
Please see the following image:
I tried below code, but I failed:
.rmbutton {
color: #ffffff !important;
background: #504d62 !important;
position: relative;
overflow: hidden;
padding: 13px 35px;
text-transform: uppercase;
display: inline-block;
font-size: 14px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
text-align: center;
font-weight: bold;
}
Thanks in advance!
Simple background, You should fiddle with the values to your liking.
button {
color: white;
padding: 40px 80px;
background: linear-gradient(100deg, red 25%, blue 26%);
}
<button>Don't click me</button>
Related
I could really use some help in my css code.
I'm trying to make my <h1> change color and shape using the transition property.
I want the shape and color to change slowly while I hover over the headline,
but currently only the color is affected, and the shape changes independently.
my code is as follows :
html :
<h1 class="box">Abcdefg</h1>
css :
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
thanks.
You just need to add border-radius to your transition
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear, border-radius 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>
You have the next line of code:
transition: background 1s linear;
The transition only works on the background right now. If you change background to all the transition will work on both background and border-radius, like this:
transition: all 1s linear;
Use all in the transition setting to affect both the border-radius and the background-color:
.box {
background: #2db34a;
margin: 1px auto;
transition: all 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>
Transitions work only on properties that have numbers. That being said, the question is it should work for the border-radius as well. But the problem here is the browser is unable to find the initial state of the property. Just add border-radius: 0% and it should work.
HTML code:
<p> the code is :</p>
<h1 class="sheet">Abcdefg</h1>
CSS Code:
css code :
.sheet {
background: blue;
margin: 1px auto;
transition: background 5s linear , border-radius 5s ease-in-out ;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.sheet:hover {
background: red;
color:grey;
border-radius: 40%;
}
I'm making a simple button with a CSS underline ease transition. All other ease transitions are working fine (hover, ease in, un-hover, ease out), but border-bottom will not ease out. When you quit hovering, it simply reverts back to normal without easing out.
Here is a code-pen with a quick button I made to illustrate the problem.
https://codepen.io/anon/pen/jwgpdv
Here is my CSS:
.gbtn {
background: #bba989;
text-align: center;
line-height: 150px;
height: 150px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
display: inline-block;
transition: all .25s ease;
box-sizing: border-box;
font-family: "montserrat", serif;
padding: 0px 30px;
}
.gbtn:hover {
background-color: #aa9470;
border-bottom: 150px solid #242424;
}
You didn't define a border before hover, how is the browser supposed to know how to transition out?
Add this:
.gbtn {
border-bottom: 0 solid #242424;
}
So I'm working on a site (beta.kylehorkley.com). The weirdest thing is happening. I'm working on a sidebar type thing (it appears once the window is small enough). However, when I hover over the links in the side bar, the side bar disappears and then reappears about a second later. This is happening in Chrome and Opera (Firefox and Edge work as expected).
Sidebar HTML:
<div id="sidebar" class="sidebar">
home
contact
portfolio
about
</div>
Sidebar CSS:
.sidebar {
background-color: rgba(255, 255, 255, 0.95);
height: calc(100% - 91px);
overflow-x: hidden;
position: fixed;
top: 91px; left: 0;
width: 100%;
z-index: 999;
}
Sidebar link CSS:
.sidelink {
border-bottom: 3px solid;
border-bottom-color: transparent;
color: rgb(50, 125, 150);
display: block;
font-family: "Varela Round";
font-size: 20px;
font-weight: 400;
margin: 26px 24px 0 24px;
opacity: 0.8;
padding: 0 4px 11px 4px;
text-transform: uppercase;
transition: opacity .35s ease;
}
.sidelink:hover {
opacity: 1;
transition: opacity .35s ease;
}
.sidelink.active {
font-weight: bold;
opacity: 1;
}
Instead of changing the opacity, change the color and this works(tried and tested)..This will fix the disappearing issue..
.sidelink {
border-bottom: 3px solid;
border-bottom-color: transparent;
color:#a9c9d3;
display: block;
font-family: "Varela Round";
font-size: 20px;
font-weight: 400;
margin: 26px 24px 0 24px;
padding: 0 4px 11px 4px;
text-transform: uppercase;
transition: all ease 0.3s;
}
.sidelink:hover {
color: rgb(50, 125, 150);
transition: all ease 0.3s;
}
Replace your class with the above code.. #a9c9d3 is the exact color when you change the opacity to 0.8. And this will fix the div disappearing issue..
I want the whole div to change from #555555 to #b13c19. It's a simple rounded corner div wrapped around a link. I cant seem to get it right. Here is what I have so far. Any help would be much appreciated.
HTML
<div id="resume_btn">
Click Here to View My Resume
</div>
CSS
#resume_btn {
position: relative;
margin-top: 25px;
padding: 20px;
width: 220px;
height: 25px;
background-color: #555555;
background-repeat: no-repeat;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-0-border-radius: 10px;
border-radius: 10px;
}
#resume_btn a {
text-decoration: none;
color:white;
font-family: 'oswald', helvetica, arial, sans-serif;
font-size: 18px;
font-weight: 300;
}
I'm not sure where to put the -moz-transition: background 1s ease-in; etc. properties. I want the background to change color when I hover over the link. I made it work for the background color of the link but it doesn't look good because the background only encompasses the wording and not the whole 230 x 25 area.
#resume_btn {
position: relative;
margin-top: 25px;
width: 320px;
background-color: #555555;
background-repeat: no-repeat;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-0-border-radius: 10px;
border-radius: 10px;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-ms-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
#resume_btn:hover {
background: #b13c19;
}
#resume_btn a {
text-decoration: none;
display: block;
color: white;
font: 300 18px 'oswald', helvetica, arial, sans-serif;
padding: 20px;
}
<div id="resume_btn">
Click Here to View My Resume
</div>
I've got this bit of HTML:
<div id="content">
<h1 id="prompt">What's on your mind?</h1>
<form action="post.php" method="POST" id="message-form">
<textarea placeholder="Type in anything you want to share. Anything at all."></textarea>
<p>Feel free to type up to <span id="character-count">2000 characters</span>, or to use Markdown formatting.</p>
<input type="submit" class="submit button" value="Share" />
<br class="clearfix" />
</form>
</div>
and this CSS:
/* CSS Reset
-------------------------------------------*/
* {
margin: 0;
padding: 0;
}
.clearfix {
clear: both;
}
/* UI Elements
-------------------------------------------*/
.button {
background-color: #ccc;
background-image: -webkit-linear-gradient(white, #ccc);
background-image: -moz-linear-gradient(white, #ccc);
background-image: -ms-linear-gradient(white, #ccc);
background-image: -o-linear-gradient(white, #ccc);
background-image: linear-gradient(white, #ccc);
border: 1px solid #999;
border-radius: 10px;
color: #333;
cursor: pointer;
font-family: Arial, Helvetica, Sans-serif;
font-size: 13px;
outline: none;
padding: 3px 8px;
text-decoration: none;
}
.button:hover {
border-color: #666;
}
.button:active {
background-color: #bbb;
background-image: -webkit-linear-gradient(#ccc, white);
background-image: -moz-linear-gradient(#ccc, white);
background-image: -ms-linear-gradient(#ccc, white);
background-image: -o-linear-gradient(#ccc, white);
background-image: linear-gradient(#ccc, white);
}
/* Content
-------------------------------------------*/
#content {
margin: 10px;
}
/* Prompt
-------------------------------------------*/
#prompt {
color: #888;
font-weight: normal;
}
/* Message Box
-------------------------------------------*/
#message-form {
width: 600px;
}
#message-form textarea {
border: 1px solid #ccc;
border-radius: 6px;
display: block;
font-family: Georgia, Times New Roman, Times, Serif;
font-size: 16px;
min-height: 100px;
outline: none;
padding: 5px;
resize: vertical;
width: 100%;
-webkit-transition: border-color 0.25s ease-in-out;
-moz-transition: border-color 0.25s ease-in-out;
-ms-transition: border-color 0.25s ease-in-out;
-o-transition: border-color 0.25s ease-in-out;
transition: border-color 0.25s ease-in-out;
}
#message-form textarea:hover {
border-color: #666;
}
#message-form textarea:focus {
border-color: #3bf;
box-shadow: 0 0 5px #3bf;
}
#message-form p {
color: #666;
float: left;
font-size: 13px;
margin: 3px;
}
#message-form .submit {
float: right;
margin-right: 0;
}
What I'm trying to accomplish is to float an element rightwards within a particular amount of space. This works, but there's about 10 pixels' space to the right of the button that don't appear to exist! It's not padding from the parent element, nor margin on the button as far as I can see... so where is it coming from? Below is an image of the problem, and the full code can be found at https://github.com/minitech/MiniTicket. Here's a demo on jsFiddle, too.
Sorry for the overload of code, but I can't seem to reproduce the problem in a simple way.
Keep in mind that setting width: 100% and any amount of horizontal padding will cause your element to have a width beyond 100% (unless it's an input element, in which padding is applied inside of the element).
In your case, your textarea width is 610px. The submit button is properly floated to the far right of your 600px width container.
See: http://jsfiddle.net/Wexcode/KX7wd/1/
Replacement for padding in textarea: http://jsfiddle.net/Wexcode/KX7wd/2/