₦airaland Forum

In web development, html button plays essential role especially in web applications where you need to have call to action buttons to perform certain functions. in modern days application, the design of a button really matters. So today am going to take you guys on a ride to the various CSS3 button designs that you can apply to your website to make it more nice and decent.

3 fundametals of a button:

1. text color
2. background color
3. shadow
4. transition

example 1
our first example will change the color of the text on hover with transition

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

<button class="color-change">button</button>

example 2
our second example is focusing on flat design (trending)

.flatdesign {
  margin-right: 10px;
  width: 100px;
  background: #1abc9c;
  border-bottom: #16a085 3px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.flatdesign:hover {
  opacity: 0.8; 
}

.flatdesign:active {
  width: 100px;
  background: #18B495;
  border-bottom: #16a085 1px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

<button class="flatdesign">Button</button>

example 3
buttons with ripple effect (trending)

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

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

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

<button class="button">Click Me</button>

example 4
button that add extra text o hover

.button {
  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;
}

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

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

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

.button:hover span:after {
  opacity: 1;
  right: 0;
}

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

example 5
button with pressed effect

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

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


<button class="button">Click Me</button>

https://i1376.photobucket.com/albums/ah37/idlatest/ripple%20btn.fw_zpss62qr5dm.png

source: http://www.geeksintersect.com/thread.php?id=15

Nice piece of information, though pple just go with bootstrap these days. d info here is refreshing

Cool

mobolaji88:
Nice piece of information, though pple just go with bootstrap these days. d info here is refreshing

Thanks mobolaji88

I hate frameworks and libraries

lalasticlala come and see a front page material oh

nice info . Thanks @op. But bootstrap help alot now for many programmers.


You would have input code to change text colour when hover or click on the text area for the sake of newbie.

idlatest:
lalasticlala come and see a front page material oh

I don't think so...
nairalanders ain't nerds...

@OP

Can you swear to the 7 gods of Programming with your favorite programming language, text editor/IDE and browser that you did not get that information/codes from w3schools.com?

Karleb:
@OP

Can you swear to the 7 gods of Programming with your favorite programming language, text editor/IDE and browser that you did not get that information/codes from w3schools.com?

it's a research, forget about w3schools, it comprises of different sources that is what research is all about

Pls, I need urgent help in creating 3line responsive menu like that found at www.propertybankng.com (at the right side of the logo). I have tried many online tips, but no success. Your assistance will be appreciated. Thanks in anticipation

basil15:
Pls, I need urgent help in creating 3line responsive menu like that found at www.propertybankng.com (at the right side of the logo). I have tried many online tips, but no success. Your assistance will be appreciated. Thanks in anticipation

hello basil15 that website is taking like a whole day to load and am using glo 100mb

why not use the font awesome bars icon instead of creating yours

idlatest:
hello basil15 that website is taking like a whole day to load and am using glo 100mb

why not use the font awesome bars icon instead of creating yours

Thanks idlatest for your reply. Pls, the website I am working on is www.propertyshowwithbimbo.com. I want a responsive font awesome bar at the right side of the logo. I am still trying some online tips, but no success. May be, I am not doing it right. Thanks in anticipation.