rocket

css web button properties tutorial

  • Web html, css, javascript, php, python, sql, jquery, xml, ajax, bootstrap.
  • Online web design, along with everything you need for a complete website.

css web button properties tutorial.Css basic button styling,Learn how to style all web buttons using CSS.

            

top

css basic button styling

Link Button 


<style>
.but {
  background-color: #5d8aa8;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>


<button>Default Button</button>
<a href="#" class="but">Link Button</a>
<button class="but">Button</button>
<input type="button" class="but" value="Input Button">

css button colors

Use the background-color property to change the background color of a button:


<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
</style>



<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

css button size

Use the font-size property to change the font size of a button:


<style>
.bute {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.but1 {font-size: 10px;}
.but2 {font-size: 12px;}
.but3 {font-size: 16px;}
.but4 {font-size: 20px;}
.but5 {font-size: 24px;}
</style>


<button class="bute but1">10px</button>
<button class="bute but2">12px</button>
<button class="bute but3">16px</button>
<button class="bute but4">20px</button>
<button class="bute but5">24px</button>

css button padding

Use the padding property to change the padding of a button:


<style>
.buta {
  background-color: #4F6AD7;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buta1 {padding: 10px 24px;}
.buta2 {padding: 12px 28px;}
.buta3 {padding: 14px 40px;}
.buta4 {padding: 32px 16px;}
.buta5 {padding: 16px;}
</style>


<button class="buta buta1">10px 24px</button>
<button class="buta buta2">12px 28px</button>
<button class="buta buta3">14px 40px</button>
<button class="buta buta4">32px 16px</button>
<button class="buta buta5">16px</button>

css button rounded

Use the border-radius property to add rounded corners to a button:


<style>
.buty {
  background-color: #313131;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buty1 {border-radius: 2px; background-color: #008CBA;}
.buty2 {border-radius: 4px; background-color: #f44336;}
.buty3 {border-radius: 8px; background-color: #e7e7e7; color:#000;}
.buty4 {border-radius: 12px; background-color: #555555;}
.buty5 {border-radius: 50%; background-color: orange; color:#000;}
</style>


<button class="buty buty1">2px</button>
<button class="buty buty2">4px</button>
<button class="buty buty3">8px</button>
<button class="buty buty4">12px</button>
<button class="buty buty5">50%</button>

css button colored

Use the border property to add a colored border to a button:


<style>
.buto {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buto1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.buto2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.buto3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.buto4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.buto5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}
</style>


<button class="buto buto1">Green</button>
<button class="buto buto2">Blue</button>
<button class="buto buto3">Red</button>
<button class="buto buto4">Gray</button>
<button class="buto buto5">Black</button>

css button hoverable

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect:



<style>
.butl {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.butl1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.butl1:hover {
  background-color: #4CAF50;
  color: white;
}

.butl2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.butl2:hover {
  background-color: #008CBA;
  color: white;
}

.butl3 {
  background-color: #fff; 
  color: #000; 
  border: 2px solid #f44336;
}

.butl3:hover {
  background-color: #f44336;
  color: #fff;
}

.butl4 {
  background-color: white;
  color: black;
  border: 2px solid yellow;
}

.butl4:hover {background-color: yellow;
color: red;}

.butl5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.butl5:hover {
  background-color: #555555;
  color: white;
}

.butl6 {
  background-color: #4CAF50; 
  color: #fff; 
  border: 2px solid #4CAF50;
}

.butl6:hover {
  background-color: #fff;
  color: #000;
}

.butl7 {
  background-color: #008CBA; 
  color: #fff; 
  border: 2px solid #008CBA;
}

.butl7:hover {
  background-color: #fff;
  color: #000;
}

.butl8 {
  background-color: #f44336; 
  color: #fff; 
  border: 2px solid #f44336;
}

.butl8:hover {
  background-color: #fff;
  color: #000;
}

.butl9 {
  background-color: yellow;
  color: black;
  border: 2px solid yellow;
}

.butl9:hover {background-color: #fff;
color: red;}

.butl10 {
  background-color: #555555;
  color: #fff;
  border: 2px solid #555555;
}

.butl10:hover {
  background-color: #fff;
  color: #000;
}
</style>

<button class="butl butl6">Green</button>
<button class="butl butl7">Blue</button>
<button class="butl butl8">Red</button>
<button class="butl butl9">Yellow</button>
<button class="butl butl10">Black</button>
<button class="butl butl1">Green</button>
<button class="butl butl2">Blue</button>
<button class="butl butl3">Red</button>
<button class="butl butl4">Yellow</button>
<button class="butl butl5">Black</button>

css buttons shadow

Use the box-shadow property to add shadows to a button:


<style>
.butl {
  background-color: #57B8DC;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.butl1 {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.255),0 17px 50px 0 rgba(250, 140, 79);
}

.butl2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.255),0 17px 50px 0 rgba(181, 195, 6);
}
</style>


<button class="butl butl1">Shadow Button</button>
<button class="butl butl2">Shadow on Hover</button>

css buttons disabled

Use the opacity property to add transparency to a button (creates a "disabled" look).

Tip: You can also add the cursor property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:


<style>
.butm {
  background-color: #A2242F;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>


<button class="butm">Normal Button</button>
<button class="butm disabled">Disabled Button</button>

css buttons width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:




<style>
.buts {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.buts1 {width: 250px; background-color: #4CAF50;}
.buts2 {width: 50%; background-color: #008CBA;}
.buts3 {width: 100%; background-color: #f44336;}
</style>


<button class="buts buts1">250px</button>
<button class="buts buts2">50%</button>
<button class="buts buts3">100%</button>

css buttons groups

Remove margins and add float:left to each button to create a button group:


<style>
.btn-group .butd {
  background-color: #734A33;
border: 0px solid #9F8170;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .butd:hover {
  background-color: #BEB4AB;
}
</style>


<div class="btn-group">
  <button class="butd">Button</button>
  <button class="butd">Button</button>
  <button class="butd">Button</button>
  <button class="butd">Button</button>
</div>

css bordered buttons groups

Use the border property to create a bordered button group:


<style>
.btn-group1 .butr {
  background-color: #734A33;
border: 1px solid #9F8170;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group1 .butr:hover {
  background-color: #BEB4AB;
}
</style>


<div class="btn-group1">
  <button class="butr">Button</button>
  <button class="butr">Button</button>
  <button class="butr">Button</button>
  <button class="butr">Button</button>
</div>

css vertical buttons groups

Use display:block instead of float:left to group the buttons below each other, instead of side by side:


<style>
.btn-group2 .butb {
  background-color: #2243B6;
  border: 1px solid #fff;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

.btn-group2 .butb:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

.btn-group2 .butb:hover {
  background-color: #1560BD;
}
</style>


<div class="btn-group2">
  <button class="butb">Button</button>
  <button class="butb">Button</button>
  <button class="butb">Button</button>
  <button class="butb">Button</button>
</div>

css buttons on image

Add a button to an image:

Snow 


<style>
.let {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.let img {
  width: 100%;
  height: auto;
}

.let .btn3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #CD5700;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.let .btn3:hover {
  background-color: black;
  color: white;
}
</style>


<div class="let">
  <img src="https://netbax.net/images/test1.jpeg" alt="Snow" style="width:100%">
  <button class="btn3">Button</button>
</div>

css animated buttons

Add an arrow on hover:


<style>
.butf {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.butf span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.butf span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.butf:hover span {
  padding-right: 25px;
}

.butf:hover span:after {
  opacity: 1;
  right: 0;
}
</style>


<button class="butf" style="vertical-align:middle"><span>Hover </span></button>

css pressed effect buttons

Add a "pressed" effect on click:


<style>
.butsd {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #FF0000;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.butsd:hover {background-color: #CE4676}

.butsd:active {
  background-color: #1D5DEC;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<button class="butsd">Click Me</button>

css fading buttons

Fade in on hover:


<style>
.butj {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.butj:hover {opacity: 1}
</style>


<button class="butj">Hover Over Me</button>

css ripple effect buttons

Add a "ripple" effect on click:



<style>
.butx {
  position: relative;
  background-color: red;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.butx:after {
  content: "";
  background: #00BFFF;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.butx:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
</style>


<button class="butx">Click Me</button>
TOP TUTORIALS
"TOPTUTORIALS"

top tutorials all programming languages

html
  

html properties tutorial

100

HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.

c1

html-attributes
css
  

css properties tutorial

100

CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.

c2

css-background-property
java
  

javascript properties tutorial

100

Java is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.

c3

js-set-timeout
creation
  

creation properties tutorial

In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site.

c4

slideshow
menu
  

css menu bar horizontal & vertical

having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.

c5

navbar1
web-buttons
  

css all style Web Buttons

Collection of hand-picked free HTML and CSS button code examples. In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS. You are free to copy, modify and use this code as you wish. All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.

c6

basic
website tools
"websitetools"

'22' Projects online website tools generator

3d   

online 3d text generator

a free online 3D tool to create 3D typography. Quick and easy, this online tool helps you create the best text design possible with just a few clicks.It can be used for your company, to create a 3D text logos, or for art. This 3D text maker will only take you a few clicks to create the perfect 3D logo.

c7

3d
banner   

online banner text generator

a helpful tool to generate image banner.Upload your assets, company logo, Simultaneously edit text, image and effects directly on all banners.

c8

banner
neon   

online neon text generator

online neon text generator, a free online neon tool to create neon typography. Quick and easy, this online tool helps you create the best text design possible with just a few clicks.It can be used for your company, to create a neon text logos, or for art. This neon text maker will only take you a few clicks to create the perfect neon logo.

c9

neon
typewriter-effect-loop   

online css typewriter effect loop

Demo relies on flexbox. The width of the text container will be determined by the length of the text being used Adding more steps to the typing animation will increase the smoothness of the typing Adjust the letter-spacing based on the font-family and font-size being used.

c10

typewriter-effect-loop
marquee   

online html marquee generator- image marquee

Link,text,images, Marquee Generator Text Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website.

c11

marquee
font   

online Font Family Generator

CSS font family generator is a very handy resource for webdevelopers and general. Generate in an instant awesome header text styles or content text styles for your website.More than 1000 font family styles are integrated that you can use.

c12

font
rainbow   

online rainbow text generator

The rainbow has no definite number of physical colours, but seven are traditionally listed. Below is a commonly used list of twenty seven colors in the order seen in a rainbow. Computer screens cannot show them precisely but can make colors that look similar. (Each color shows the number codes used to tell a computer how to display the color.) online css rainbow text generator. How to create online rainbow text. here is the tool creating HTML rainbow text.“Rainbow” your text with this rainbow text generator. Turn your black and white text into rainbow-colored text!.

c13

rainbow
stroke   

online stroke text generator

border stroke text generator,To use this text stroke/outline tool adjust the values and copy the generated code.Text-stroke was implemented in CSS3 and is one of the less well-known of the newer styling features, among which are border-radius and box-shadow. As you can see in the code example above, text-stroke has two properties. The first is the width of the stroke in pixels, the second is the colour of the stroke, which can be given transparency by using an rbga value.

c14

stroke
box-shadow   

online box shadow generator

This tool will help you generate CSS box shadows for your website. generate a box shadow with your preferences. Set up the attributes to get the CSS code.

c15

box-shadow
text-shadow   

online text shadow generator

This tool will help you generate CSS text shadows for your website. generate a text shadow with your preferences. Set up the attributes to get the CSS code.

c16

text-shadow
notebook   

Online Notebook Paper Maker Generator

Online Notebook Paper Maker Generator. Question: I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.

answer: this tutorial will show you how to create a notebook themed website using only css.

c17

notebook
meta-tag-code   

online meta tag code generator full complete

online html meta tag code generator full complete use for generate your meta information code like meta description, meta keyword etc. just set parameter value and generate Meta code. Search Engine find your web page easy or optimize your website.

c18

meta-tag-code
bo   

online css border generator

Link,text,images, Marquee Generator Text Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website.Create to customize CSS border styles. The most important being the thickness, its color and the style: solid, dotted, dashed, double, groove, ridge, inset, outset. Set the color transparency for the line surrounding the object and finally the position. Draw the line above, on the right, on the left on the below the HTML element.

c19

bo
radius   

online css border radius generator

The border-radius is one of the most used CSS properties to soften corners of HTML boxes. If you use equal border-radius on all corners, it is relatively easy to apply, and you don't need any helper tool to set it. You can either use standard CSS units like pixel (px), rem, em or percentages for border-radius.

c20

radius
gradient   

online gradient color generator

This tool will help you generate CSS gradient color for your website. generate a gradient color with your preferences. Set up the attributes to get the CSS code.

c21

gradient
table   

online html table generator

Use this HTML Table Generator to create tables on the fly.Copy the HTML code below to put your table online.The HTML responsive table generator tool quickly and easily creates website mobile responsive tables that pass HTML5 validation and web accessibility.

c22

table
privacy-terms   

Online privacy policy generator

online privacy policy generator. Generate a Privacy Policy or a Privacy Notice for your site. Comply with CCPA, GDPR, CalOPPA, Google Adsense and affiliate programs.

c23

privacy-terms
favicon   

online favicon text maker

online favicon text maker, Quickly generate your favicon from text by selecting the text, fonts, the colors, and border. Download your favicon in the most up to date formats.

c24

favicon

REGISTER / LOGIN

web services
"webservices"

web services

design

web design

  • Web design.
  • Logo design.
  • Creation of corporate identity (business card design, product packaging, company forms, letterheads - folders, banners, etc.).
  • Applications with QR Code tailored to you.
    • marketing

    Digital Marketing

  • Website SEO promotion.
  • Promotion with Google Ads.
  • Email marketing.
  • Content creation (texts, custom graphics).
    • support

    Technical Support

  • Hosting services.
  • Technical support services to ensure high performance all year round.
  • Content creation (texts, custom graphics).
    • create-website

    Create a Website

  • Creation of modern websites at affordable prices.
  • We build custom & wordpress websites.
    • qr-code

    QR Code Apps

  • QRcodes can be leveraged for many uses.
  • We create your own QRcode app quickly, just the way you need it, to use it.
    • seo

    Website SEO Promotion

  • Get high on Google without having to pay for ads all the time.
  • Website promotion with SEO (Search Engine Optimization) so you can get to the first results!

    • My Skills

    Skills assessment. Although the years working on a skill can provide an indication of maturity and expertise gained, this alone is not enough. Different people have different levels of gaining knowledge and expertise and there are people that have a natural inclination to some specific skills.

    HTML5
    100%
    CSS3
    100%
    JAVASCRIPT
    100%
    PHP
    100%
    JQUERY
    100%
    WORDPRESS
    100%
    SQL
    100%
    XML
    100%
    DESIGN & DEVELOPMENT
    ⭐⭐⭐⭐⭐  Best Seller
    100%
    PHOTO MAKER
    100%
    PHOTOSHOP
    100%
    SEO
    100%