Could anyone show me some tutorials that make a button in css and doesn't require images? I googled it but everything involved images...
Thanks!
Um, define "button"? If you just want a basic button, you don't even need CSS, just use an HTML input or button tag...
<input type="button" value="Press me!" />
or
<button>Press me!</button>
If I understand you correctly, you want to make an arbitrary element look like a button?
Well ... just write CSS accordingly! Here's a kickoff example which makes a link look like a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
This one is kind of dull but gets the trick done!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
Try it: http://jsfiddle.net/eD9sf/
There are some awesome examples here - Pure CSS Buttons - of buttons that don't need any images but are legit. I think that you could add some gradients to some of them, but otherwise they looks exactly like the ones on Facebook, Twitter, Wordpress, etc. If you don't know much CSS, I'd suggest that you just copy one of those examples.
This is a very simple design, but looks pretty good
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button">Click me</div><br/>
<a class="button-link" href="#">Click me, link only</a>
This one looks lovely, acording to me :)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />
Related
I am trying to create a crud application in React.
As you can see from the picture, some buttons look different somehow I don't know why.
Could you please help me with finding the error, I can't find it and have spent hours on it.
As you can see from the picture, "Güncelle" and "Sil" buttons don't look the way they should be.
Picture:
ScreenShot
Here is my .js and .css file:
import React from "react";
import { useNavigate } from "react-router-dom";
import "./İlCrud.css";
export default function İlCrud() {
let navigate = useNavigate();
return (
<div id="il-crud-div">
<h3>İl CRUD</h3>
<div id="create-div">
<input type="text" name="ilKodu" placeholder="İl Kodu..."/>
<br/>
<input type="text" name="ilAdi" placeholder="İl Adi..."/>
<br/>
<input type="button" id="create" value="Yarat"/>
</div>
<div id="update-delete-div">
<input type="button" id="update" value="Güncelle"/>
<input type="button" id="delete" value="Sil"/>
</div>
</div>
);
}
Here, I have created one container div and created 2 divs inside of it. I have created some buttons and input areas.
#import url(https://fonts.googleapis.com/css?family=Prosto+One);
*
{
-webkit-transition: all 0.3s ease;
}
body
{
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: 'Prosto One', cursive;
background: url('https://subtlepatterns.com/patterns/egg_shell.png');
_background: #eee;
}
#il-crud-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 75%;
margin-left: 10%;
margin-top: 120px;
text-align: center;
padding: 40px;
padding-bottom: 300px;
padding-top: 40px;
border-radius: 3px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
}
#create-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
margin-right: 10%;
text-align: center;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#update-delete-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#create-div input
{
color: #777;
font-weight: bold;
width: 40%;
padding: 10px;
margin: 10px;
border: 1px solid #afafaf;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
outline: none;
}
#create-div #create
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #0aee62;
}
#update-delete-div #update
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #1501c2;
}
#update-delete-div #delete
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #d60a0a;
}
If you look at your css code, you have "#create-div input". Even though you have an id selector on the input 'Button' it's taking on the css code because it's in the id="create-div" and it is an input. You didn't do the same for the update and delete inputs so it's missing the padding and such. Here the sandbox so you can see what I mean https://codesandbox.io/s/nostalgic-kare-jyf76?file=/src/styles.css:1040-1057
so I have created button with on hover changes style and when I click it it fades Out by Jquery script
and problem is when mouse is hovered on button and then clicked fadeOut animation stops and bugs out
skips it half way it doe's not happens when button has no css hover code in it soo I want it to not skip fade and also work on hover.
here is code.
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButton").fadeOut(300);
});
});
.Main_button_Join {
width: 200px;
height: 100;
margin-top: 30px;
border-radius: 5px;
background-color: transparent;
border-style: solid;
border-color: transparent;
outline: none;
font-size: 5rem;
text-align: end;
font-family: 'Anton', sans-serif;
letter-spacing: 10px;
color: whitesmoke;
text-shadow: skyblue 2px 2px 20px;
box-shadow: 0 10px 2px -2px whitesmoke;
padding: 10px;
cursor: pointer;
}
.Main_button_Join:hover {
transition: 1s;
text-shadow: rgb(143, 40, 0) 4px 4px 30px;
border-color: transparent;
color: rgb(252, 0, 0);
box-shadow: 0 10px 2px -2px rgba(0, 0, 0, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myButton" class="Main_button_Join" type="button" align="center">Join</button>
it needed div button could not function with hover and fade out together soo now instead div fadesout button and it works just fine.
Join
Not sure is this what you looking for ? I change jQuery fade out to class, with transition
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButton").addClass("fadeOut");
});
});
.Main_button_Join {
width: 200px;
height: 100;
margin-top: 30px;
border-radius: 5px;
background-color: transparent;
border-style: solid;
border-color: transparent;
outline: none;
font-size: 5rem;
text-align: end;
font-family: 'Anton', sans-serif;
letter-spacing: 10px;
color: whitesmoke;
text-shadow: skyblue 2px 2px 20px;
box-shadow: 0 10px 2px -2px whitesmoke;
padding: 10px;
cursor: pointer;
transition:0.3s all ease;
}
.Main_button_Join:hover {
transition: 1s;
text-shadow: rgb(143, 40, 0) 4px 4px 30px;
border-color: transparent;
color: rgb(252, 0, 0);
box-shadow: 0 10px 2px -2px rgba(0, 0, 0, 0);
}
.Main_button_Join.fadeOut{
opacity:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myButton" class="Main_button_Join" type="button" align="center">Join</button>
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
How do I style a button, with a shadow, so that it looks like it is pressed in?
I tried using box-shadow: ... ;. But this didn't have any affect.
By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;
Using the :active pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}
<button>
Click me
</button>
Using the :focus pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
Click me
</button>
As an alternative to buttons, there is also a possibility to simply use checkbox with the pseudo-class :checked to toggle between states.
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 11px 21px;
border: 1px solid #ccc;
display: inline-block;
color: #202020;
border-radius: 6px;
margin: 7px;
background: #f5f5f5;
user-select: none;
}
label.label-checkbox input:checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #e5e5e5;
}
<h1>Pressed buttons with Checkbox</h1>
<label class="label-checkbox">
<input type="checkbox">
<span>Checkbox</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Styled</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>As</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Pressed</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>Buttons</span>
</label>
The best way is to nudge the button lower on the page. Using transformY would be the most straight-forward. However that can mess up the layout of other things in the page. So I think that it is better to use margin to temporarily lower the button, such as,
button {
background-color: white;
padding: 10px;
vertical-align: top;
box-shadow: 2px 1px 2px gray;
margin: 4px 10px 4px 10px;
}
button:active {
box-shadow: 0 0 0 white;
margin: 6px 10px 2px 10px;
}
<button>click me</button>
<button>click me</button>
<br>
<button>click me</button>
<button>click me</button>
As in the example, you can take away 2px from the bottom margin, and add 2px to the top margin, therefore you preserve the total size of the button.
You need vertical-align in case there are more than one button.
I think that the best way to make a button looks like it's pressed it's to make it a little darker.
button{
background-color: #03A9F4;
border: none;
padding: 15px 25px;
text-transform: uppercase;
color: white;
font-weight: 700;
border-radius: 3px;
}
button:hover, button:focus{
background-color: #0074a9;
outline: none;
}
<button>Button</button>
If you think visually about what happens when a push-button (like on an old-style stereo system) is pushed in, the button moves back. Visually, the face of the button is darker. The text on the button is inset. The border of the button is dark.
The other answers here all give part of the answer.
This visually does all of the above:
.btnPushed {
color: #efefef; //orig text color was #FFF
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 4px #222;
transform: translateY(1px); /* Add per Vince's helpful comment */
}
As you might notice, we apply the styling by adding a class.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-color: #b8860b;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button class="depressed">Button3</button>
<button>Button4</button>
To avoid the adjustment (movement) of the other buttons due to the margin change, just put each button into a fix-size div. That way the buttons move around within their divs, without affecting the other buttons inside their own divs.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
div {
display: inline-block;
width: 65px;
height: 25px;
}
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div><button>Button1</button></div>
<div><button>Button2</button></div>
<div><button class="depressed">Button3</button></div>
<div><button>Button4</button></div>
Update:
Added transform: translateY(1px), per Vince's helpful comment below.
.button{
color: white;
background-color: blue;
padding: 8px 25px;
border-radius : 7px;
}
.button:active {
box-shadow: 0 0 0 black;
margin: 3px 0 0 0 ;
}
<input type="button" class="button" value="Enter">
button{
background-color:grey;
padding:10px;
border:none;
color:white;
}
button:hover{
background-color:black;
color:white;
}
<button class"b1">button</button>
I am trying to add a background image to a button (or link with the same class) which already has a background color.
Here is the jsfiddle: http://jsfiddle.net/BNvke/
The button looks great by itself, but I am trying to make it so that if I add a certain class, the padding will be adjusted and a background image will be displayed, however the image does not show. Here is the CSS/HTML:
.button {
padding: 10px;
margin-right: 8px;
margin-bottom: 10px;
font-family: Arial, Tahoma, Verdana, FreeSans, sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
display: inline-block;
white-space: nowrap;
line-height: 1em;
position: relative;
outline: none;
overflow: visible;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 1px 2px 0 #CCCCCC;
-moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}
.button_blue {
border: 1px solid #305875;
color: #FBFBFB;
background-color: #3D6E97;
}
.button_blue:hover {
color: #FBFBFB;
opacity: 0.9;
filter: alpha(opacity=90);
}
.button_about {
background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
padding-left: 35px;
padding-right: 15px;
}
<p><a class="button button_blue">Without Background</a></p>
<p><a class="button button_blue button_about">With Background</a></p>
How can I get that background image to show?
see http://jsfiddle.net/BNvke/1/
just change
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
with
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
and move up the last rule so the rule about background-color defined for .button_blue can be applied on cascade
.button {
background: url(http://i47.tinypic.com/2ni0ahd.png);
background-repeat: 3px 5px no-repeat;
}