I am trying to create a button like this image with PURE CSS. Please could you help me with the CSS ?
This Image
I am trying using below but not giving exact same result -
.styled {
border: 0 !important;
line-height: 2.5;
font-weight: bold;
text-align: center !important;
color: rgba(11,44,20,255) !important;
border-radius: 8px !important;
padding: 5px 16px 5px 16px;
transition: 0.2s all;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 100%,
rgba(0, 0, 0, 0)) !important;
box-shadow: inset 7px 7px 3px rgba(255, 255, 255, .6),
inset -7px -7px 3px rgba(0, 0, 0, .7) !important;
}
This is closest as I can get without the button background. You can try experimenting with CSS gradients until you hit the actual angle.
#button{
width: 69px;
height: 34px;
position: relative;
background: #3F4E4C;
background: -webkit-radial-gradient(bottom right, #3F4E4C, #7CD9BA);
background: -moz-radial-gradient(bottom right, #3F4E4C, #7CD9BA);
background: radial-gradient(to top left, #3F4E4C, #7CD9BA);
border: none;
outline: none;
border-radius: 8px;
}
#external{
position: absolute;
top: 6px;
left: 6px;
background: #3ade66;
width: calc(100% - 12px);
height: calc(100% - 12px);
border-radius: 6px;
text-align:center;
color: black;
line-height: 2.2;
font-size: 10px;
font-weight: bold;
}
<button id="button">
<div id="external">Start</div>
</button>
Add an onclick event to the image.
function myFunction() {
alert("Button clicked");
};
img {
/*Disables dragging of the image*/
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
/*Sets the mouse to pointer when hovered*/
cursor: pointer;
}
<img src="https://i.stack.imgur.com/Rggof.png" onclick="myFunction();">
Got the similar view using -
.styled {
border: 0 !important;
line-height: 2.5;
font-weight: bold;
text-align: center !important;
color: rgba(11,44,20,255) !important;
border-radius: 10px !important;
transition: 0.2s all;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 100%,
rgba(0, 0, 0, 0)) !important;
box-shadow: inset 6px 6px 1px rgba(255, 255, 255, .3),
inset -6px -6px 1px rgba(0, 0, 0, .3) !important;
}
I want to decrease the font size of first div and increase the font size of the second div.
top1 {
transform: translateX(-7em);
font-size: 1.2em !important ;}
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
font-size: .7em;
}
https://codepen.io/tiwari_ashuism/pen/WNOjbgO
Both div elements have the same id="txt" and this id has a font-size of 0.7em which you need to delete. Use the classes to apply different font-size for each div class.
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
}
.top1 {
transform: translateX(-7em);
font-size: 1.5em !important ;
}
.top2 {
transform: translateX(7em);
font-size: 1.1em !important;
}
I am creating a button with a drop shadow effect (neumorphism) but when I apply my CSS to the button is just appears as a 2 toned solid button...Which part of the CSS am I using incorrectly? Are my drop shadow values wrong relative to the size of the button? Changing the width and height doesn't help.
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 35px;
}
.buysellbutton {
width: 44px;
height: 44px;
background: #F0F0F3;
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
border-radius: 16px;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
</div>
to remove black border from button just add broder-style:none to button. Added one more button with hover and active styling.
for creating Neumorphism effect you can check https://neumorphism.io/
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 15px;
padding: 10px;
}
.buysellbutton {
width: 80px;
height: 44px;
border-style:none;
border-radius: 16px;
background: #F0F0F3;
box-shadow: 18px 18px 36px #c5c5c7,
-18px -18px 36px #ffffff;
outline:none;
}
.button {
width: 150px;
height: 50px;
background: #f3f0f1;
position: relative;
background: #f3f0f1;
margin-bottom: 25px;
border-radius: 32px;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
outline: none;
border-style: none;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
color: #6f6cde;
}
span {
font-size: 25px;
font-weight: semibold;
}
.button:hover {
opacity: 0.7;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
}
.button:active {
opacity: 1;
box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1);
color: #79e3b6;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
<button class="button"><span>Buy</span></button>
</div>
First, use the below code at the top of all CSS
button{
all: unset;
}
and instead of
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
use
box-shadow: -10px -10px 30px 40px #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
I'm having some trouble with this wedding website I'm making for school. The problem being that the center decoration piece witch will eventually be a logo, doesn't align with the top of the page when the screen size is changed. On the screen I'm working on it looks fine, but on other screens it gets messed up.
Screen I'm working on. Looks fine.
Friend's Screen is moved down or on other screens is cut off.
I have tried everything from changing the position type and the display type, trying to set margins. To even setting it fixed and then positioning it where I want it, but always ends up messing something else up. The nav bar is fixed at the top of the screen and the surrounding links are aligned to it. I can't seem to solve it and am wondering if anyone has any solutions.
Here is a link to the download for the website:Website
#import url('http://weloveiconfonts.com/api/?family=entypo');
html{
background-image: url("background.jpg");
background-size:cover;
background-position:0px 60px;
background-attachment: fixed;
padding:0px;
}
body{
margin:0;
}
nav{
background-color: snow;
text-align: center;
position: fixed;
width:100%;
margin:0;
z-index: 100;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
section{
padding-bottom: 20px;
text-align: center;
position: relative;
top: 60px;
background-color: dimgrey;
z-index:50;
margin-left:15%;
margin-right:15%;
}
footer{
font-size: 13px;
z-index: 75;
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
color: slategray;
margin-top:60px;
top:60px;
background-color: #ddd;;
height:60px;
margin-left:15%;
margin-right:15%;
padding: 20px;
-webkit-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
}
nav ul{
text-align: center;
list-style:none;
margin: 0;
padding: 0;
}
nav ul li{
text-align: center;
display: inline;
margin:0px;
}
nav ul li a{
margin-left:-2px;
margin-right:-2px;
color: slategray;
display: inline-block;
text-decoration: none;
font-size:25px;
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
padding: 7px;
text-align:center;
padding-left: 10px;
padding-right:10px;
padding-top:15px;
padding-bottom:15px;
height: 10%;
width:9%;
-webkit-transition: background-color 0.2s;
}
nav ul li a:hover{
background-color:#d9d9d9;
}
nav ul li a:active{
background-color:#d9d9d9;
}
nav ul li img{
z-index: -20;
align-content: center;
position: relative;
top: 75px;
background-color: snow;
width:20%;
height:100%;
margin-left: 15px;
margin-right:15px;
margin-top:-210px;
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:5px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.wedding{
width:100%;
margin-bottom: 5px;
}
h1{
background-color: snow;
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
margin-bottom:25px;
padding:10px;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.footer-info{
margin: 0;
list-style:none;
text-decoration: none;
float: left;
}
.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
margin: 0;
padding: 0;
border: none;
border-spacing: 0;
}
/* Calendar Wrapper */
.ui-datepicker {
display: none;
width: 294px;
padding: 35px;
cursor: default;
margin-left:20px;
text-transform: uppercase;
font-family: Tahoma;
font-size: 12px;
background: snow;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
}
/* Calendar Header */
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #d6d6d6;
}
.ui-datepicker-title { text-align: center; }
/* Month */
.ui-datepicker-month {
position: relative;
padding-right: 15px;
color: #565656;
}
.ui-datepicker-month:before {
display: block;
position: absolute;
top: 5px;
right: 0;
width: 5px;
height: 5px;
content: '';
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Year */
.ui-datepicker-year {
padding-left: 8px;
color: #a8a8a8;
}
/* Prev Next Month */
.ui-datepicker-prev,
.ui-datepicker-next {
position: absolute;
top: -2px;
padding: 5px;
cursor: pointer;
}
.ui-datepicker-prev {
left: 0;
padding-left: 0;
}
.ui-datepicker-next {
right: 0;
padding-right: 0;
}
.ui-datepicker-prev span,
.ui-datepicker-next span{
display: block;
width: 5px;
height: 10px;
text-indent: -9999px;
background-image: url(../img/arrows.png);
}
.ui-datepicker-prev span { background-position: 0px 0px; }
.ui-datepicker-next span { background-position: -5px 0px; }
.ui-datepicker-prev-hover span { background-position: 0px -10px; }
.ui-datepicker-next-hover span { background-position: -5px -10px; }
/* Calendar "Days" */
.ui-datepicker-calendar th {
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
font-weight: normal;
color: #a8a8a8;
}
.ui-datepicker-calendar td {
padding: 0 7px;
text-align: center;
line-height: 26px;
}
.ui-datepicker-calendar .ui-state-default {
display: block;
width: 26px;
outline: none;
text-decoration: none;
color: #a8a8a8;
border: 1px solid transparent;
}
/* Day Active State*/
.ui-datepicker-calendar .ui-state-active {
color: #6a9113;
border-color: #6a9113;
}
/* Other Months Days*/
.ui-datepicker-other-month .ui-state-default { color: #565656; }
.social {
display: inline-block;
width: 50px;
height: 50px;
margin: 0 10px;
line-height: 50px;
font-family: Entypo;
font-size: 28px;
text-align: center;
color: #555;
border-radius: 10px;
background: #eee;
overflow: hidden;
cursor: pointer;
text-decoration: none;
}
.wrapper {
float: right;
text-align: center;
}
.social {
box-shadow: rgb(210, 210, 210) 1px 1px,
rgb(210, 210, 210) 2px 2px,
rgb(211, 211, 211) 3px 3px,
rgb(211, 211, 211) 4px 4px,
rgb(211, 211, 211) 5px 5px,
rgb(212, 212, 212) 6px 6px,
rgb(212, 212, 212) 7px 7px,
rgb(212, 212, 212) 8px 8px,
rgb(213, 213, 213) 9px 9px,
rgb(213, 213, 213) 10px 10px,
rgb(214, 214, 214) 11px 11px,
rgb(214, 214, 214) 12px 12px,
rgb(214, 214, 214) 13px 13px,
rgb(215, 215, 215) 14px 14px,
rgb(215, 215, 215) 15px 15px,
rgb(215, 215, 215) 16px 16px,
rgb(216, 216, 216) 17px 17px,
rgb(216, 216, 216) 18px 18px,
rgb(216, 216, 216) 19px 19px,
rgb(217, 217, 217) 20px 20px,
rgb(217, 217, 217) 21px 21px,
rgb(218, 218, 218) 22px 22px,
rgb(218, 218, 218) 23px 23px,
rgb(218, 218, 218) 24px 24px,
rgb(219, 219, 219) 25px 25px,
rgb(219, 219, 219) 26px 26px,
rgb(219, 219, 219) 27px 27px,
rgb(220, 220, 220) 28px 28px,
rgb(220, 220, 220) 29px 29px,
rgb(221, 221, 221) 30px 30px;
text-shadow: rgb(226, 226, 226) 1px 1px,
rgb(227, 227, 227) 2px 2px,
rgb(227, 227, 227) 3px 3px,
rgb(228, 228, 228) 4px 4px,
rgb(229, 229, 229) 5px 5px,
rgb(229, 229, 229) 6px 6px,
rgb(230, 230, 230) 7px 7px,
rgb(230, 230, 230) 8px 8px,
rgb(231, 231, 231) 9px 9px,
rgb(232, 232, 232) 10px 10px,
rgb(232, 232, 232) 11px 11px,
rgb(233, 233, 233) 12px 12px,
rgb(233, 233, 233) 13px 13px,
rgb(234, 234, 234) 14px 14px,
rgb(235, 235, 235) 15px 15px,
rgb(235, 235, 235) 16px 16px,
rgb(236, 236, 236) 17px 17px,
rgb(236, 236, 236) 18px 18px,
rgb(237, 237, 237) 19px 19px,
rgb(238, 238, 238) 20px 20px;
}
<!doctype html>
<html lang="en-US">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li><img src="img/hearts.png"></li>
<li>Reservations</li>
<li>Menue</li>
<li>Contact</li>
</ul>
</nav>
<section>
<img src="img/wedding.jpg" class="wedding">
</section>
<footer>
<ul class="footer-info">
<li> <p>Made by Taylor Bastian and Danial Andales for FBLA competition</p> </li>
<li><p>Copyright © 2015. SampleCorp</p></li>
</ul>
<div class="wrapper">
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
</div>
</footer>
</body>
</html>
Try using "em" instead of pixels. pixel's are the same size on every screen and so they do not adjust to your screen, however, "em"s will be the same relative size on all screens, meaning that it will adjust to your screen. Hope this helped, I'm a newbie too. :P
This is a common problem with spaces, margin, padding sizes, in a large browser everything will works fine but in a small browser like width 1024px, the elements will move because they don't have enough space.
Change some css in
nav ul li img change top:-13px
It fix your example, if not, use media query, to large browser maybe is top:0 for smaller browser use the accurate top:xx,
have fun.
I am trying to make buttons using CSS, instead of using image sprites.
These are going to be across the site with different text, so making a large image sprite does not make sense, especially since the size of the buttons vary according to the text.
This is what I've been able to achieve : (very different from the original one)
Fiddle Link
a {
display: inline-block;
line-height: 20px;
text-decoration: none;
font-family: 'Arial';
font-size: 19px;
font-weight: 700;
color: #ddd;
padding: 10px 20px;
border-radius: 5px;
border: 1px solid #001151;
text-shadow: 2px 2px 4px rgba(32,70,97,.55);
background: #002483;
background: linear-gradient(
to bottom,
rgba(0,36,131,1) 0%,
rgba(0,44,151,1) 27%,
rgba(0,61,166,1) 55%,
rgba(15,77,180,1) 82%,
rgba(23,83,185,1) 100%);
}
P.S. : (Browser Support >= IE9)
Is creating buttons like these possible using only HTML + CSS?
Don't get me wrong, but this button is ugly :). The standard nowdays is to make buttons as simple as possible with very subtle gradients.
Here is my try though, CSS only: http://jsfiddle.net/9CPBY/1/
I have used before to add the reflexion and after to add the spotlight glare.
a:after{
content:".";
position:absolute;
color:transparent;
width:1px;
height:1px;
background:white;
top:5px;
left:70%;
border-radius:10px;
box-shadow:0px 0px 20px 10px white;
}
Gradient generated using ColorZilla's generator.
Only tested in Chrome, should work fine in other browsers too.
Here is an example that has glare. You need to do it with 2 divs
DEMO http://jsfiddle.net/kevinPHPkevin/hZgxV/
HTML
<div id="blue_button" >
<div class="blue_glare"></div>
</div>
CSS
#blue_button {
margin-top:20px;
height: 30px; width: 150px;
border-radius: 16px;
border: 2px solid #ccc;
text-align: center;
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
background-image: -moz-linear-gradient(top, #1c5b9b, #6cbfff);
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
float: left;
margin-right: 30px;
}
.blue_glare {
top: 0;
left: 5px;
border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
margin: 0 auto;255
z-index: 10;
}
CSS is fairly limited in this regard, unfortunately. However, you could always embed an image into the CSS using Base64 format.