Port.forumgreek.com
Θέλετε να αντιδράσετε στο μήνυμα; Φτιάξτε έναν λογαριασμό και συνδεθείτε για να συνεχίσετε.

Push Button Color Options

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Port Admin
Port Admin
Admin
Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017
https://port.forumgreek.com

ΔημοσίευσηPort Admin Τρι Αυγ 29, 2017 1:48 am

Push Button Color Options Oaooe_26

HTML:

Κώδικας:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Multi-colored Push Buttons</title>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <div class="container">
    <div class="column red">
      <a href="#" class="button red">Push</a>
      <a href="#" class="button red alt">Push</a>
    </div>

    <div class="column blue">
      <a href="#" class="button blue">Push</a>
      <a href="#" class="button blue alt">Push</a>
    </div>

    <div class="column green">
      <a href="#" class="button green">Push</a>
      <a href="#" class="button green alt">Push</a>
    </div>

    <div class="column cyan">
      <a href="#" class="button cyan">Push</a>
      <a href="#" class="button cyan alt">Push</a>
    </div>

    <div class="column brown">
      <a href="#" class="button brown">Push</a>
      <a href="#" class="button brown alt">Push</a>
    </div>

    <div class="column pink">
      <a href="#" class="button pink">Push</a>
      <a href="#" class="button pink alt">Push</a>
    </div>

    <div class="column purple">
      <a href="#" class="button purple">Push</a>
      <a href="#" class="button purple alt">Push</a>
    </div>

    <div class="column gray">
      <a href="#" class="button gray">Push</a>
      <a href="#" class="button gray alt">Push</a>
    </div>

CSS:

Κώδικας:
/*
 * Copyright (c) 2012 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * View the Sass/SCSS source at:
 * http://www.cssflow.com/snippets/multi-colored-push-buttons/demo/scss
 *
 * Original PSD by Marian Mraz: http://goo.gl/9Il5d
 */ greekport.gr

@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css";

body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #f8f6f6;
}

.container {
  zoom: 1;
}

.container:before, .container:after {
  content: '';
  display: table;
}

.container:after {
  clear: both;
}

.column {
  position: relative;
  z-index: 1;
  float: left;
  width: 25%;
  padding: 30px 0;
  text-align: center;
  white-space: nowrap;
}

.column .button + .button {
  margin-left: 20px;
}

@media screen and (max-width: 800px) {
  .column {
    width: 50%;
  }
}

@media screen and (max-width: 400px) {
  .column {
    width: 100%;
  }
}

.button {
  display: inline-block;
  position: relative;
  height: 33px;
  line-height: 33px;
  padding: 0 15px;
  font-size: 15px;
  color: white;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 2px solid;
  border-radius: 7px;
  outline: 0;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
}

.button:before, .button:after {
  content: '';
  position: absolute;
}

.button:before {
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  z-index: -1;
  border-radius: 9px;
}

.button:after {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: 7px;
}

.button.alt {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.button.alt:before {
  display: none;
}

.column.red {
  background: #d04022;
}

.button.red {
  background: #d02e17;
  border-color: #942110 #902010 #741a0d;
  background-image: -webkit-linear-gradient(top, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
  background-image: -moz-linear-gradient(top, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
  background-image: -o-linear-gradient(top, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
  background-image: linear-gradient(to bottom, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
}

.button.red:before {
  background: #ee442c;
  background-image: -webkit-linear-gradient(top, #b32511, #f3533c);
  background-image: -moz-linear-gradient(top, #b32511, #f3533c);
  background-image: -o-linear-gradient(top, #b32511, #f3533c);
  background-image: linear-gradient(to bottom, #b32511, #f3533c);
}

.button.red:active {
  background: #e63b1b;
  background-image: -webkit-linear-gradient(top, #a9110b 0%, #de3819 60%, #e63b1b 100%);
  background-image: -moz-linear-gradient(top, #a9110b 0%, #de3819 60%, #e63b1b 100%);
  background-image: -o-linear-gradient(top, #a9110b 0%, #de3819 60%, #e63b1b 100%);
  background-image: linear-gradient(to bottom, #a9110b 0%, #de3819 60%, #e63b1b 100%);
}

.button.red:active:after {
  border-color: #e63b1b;
}

.column.blue {
  background: #4071b6;
}

.button.blue {
  background: #3471b8;
  border-color: #255184 #244f80 #1e4068;
  background-image: -webkit-linear-gradient(top, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
  background-image: -moz-linear-gradient(top, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
  background-image: -o-linear-gradient(top, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
  background-image: linear-gradient(to bottom, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
}

.button.blue:before {
  background: #4c8ad3;
  background-image: -webkit-linear-gradient(top, #29609f, #5995da);
  background-image: -moz-linear-gradient(top, #29609f, #5995da);
  background-image: -o-linear-gradient(top, #29609f, #5995da);
  background-image: linear-gradient(to bottom, #29609f, #5995da);
}

.button.blue:active {
  background: #3d79c8;
  background-image: -webkit-linear-gradient(top, #216298 0%, #3774c4 60%, #3d79c8 100%);
  background-image: -moz-linear-gradient(top, #216298 0%, #3774c4 60%, #3d79c8 100%);
  background-image: -o-linear-gradient(top, #216298 0%, #3774c4 60%, #3d79c8 100%);
  background-image: linear-gradient(to bottom, #216298 0%, #3774c4 60%, #3d79c8 100%);
}

.button.blue:active:after {
  border-color: #3d79c8;
}

.column.green {
  background: #429538;
}

.button.green {
  background: #3e952d;
  border-color: #29621e #275e1c #1d4715;
  background-image: -webkit-linear-gradient(top, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
  background-image: -moz-linear-gradient(top, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
  background-image: -o-linear-gradient(top, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
  background-image: linear-gradient(to bottom, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
}

.button.green:before {
  background: #4ac233;
  background-image: -webkit-linear-gradient(top, #317c22, #52d039);
  background-image: -moz-linear-gradient(top, #317c22, #52d039);
  background-image: -o-linear-gradient(top, #317c22, #52d039);
  background-image: linear-gradient(to bottom, #317c22, #52d039);
}

.button.green:active {
  background: #42a933;
  background-image: -webkit-linear-gradient(top, #31741b 0%, #3fa131 60%, #42a933 100%);
  background-image: -moz-linear-gradient(top, #31741b 0%, #3fa131 60%, #42a933 100%);
  background-image: -o-linear-gradient(top, #31741b 0%, #3fa131 60%, #42a933 100%);
  background-image: linear-gradient(to bottom, #31741b 0%, #3fa131 60%, #42a933 100%);
}

.button.green:active:after {
  border-color: #42a933;
}

.column.cyan {
  background: #39a4b2;
}

.button.cyan {
  background: #2eabb3;
  border-color: #20797e #1f757a #195d62;
  background-image: -webkit-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: -moz-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: -o-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: linear-gradient(to bottom, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
}

.button.cyan:before {
  background: #3fccd5;
  background-image: -webkit-linear-gradient(top, #249299, #4dd3dc);
  background-image: -moz-linear-gradient(top, #249299, #4dd3dc);
  background-image: -o-linear-gradient(top, #249299, #4dd3dc);
  background-image: linear-gradient(to bottom, #249299, #4dd3dc);
}

.button.cyan:active {
  background: #33b9c7;
  background-image: -webkit-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: -moz-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: -o-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: linear-gradient(to bottom, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
}

.button.cyan:active:after {
  border-color: #33b9c7;
}

.column.brown {
  background: #c5aa3b;
}

.button.brown {
  background: #c8a22e;
  border-color: #927622 #8e7321 #755f1b;
  background-image: -webkit-linear-gradient(top, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
  background-image: -moz-linear-gradient(top, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
  background-image: -o-linear-gradient(top, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
  background-image: linear-gradient(to bottom, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
}

.button.brown:before {
  background: #dcb94d;
  background-image: -webkit-linear-gradient(top, #ae8c24, #e3c15b);
  background-image: -moz-linear-gradient(top, #ae8c24, #e3c15b);
  background-image: -o-linear-gradient(top, #ae8c24, #e3c15b);
  background-image: linear-gradient(to bottom, #ae8c24, #e3c15b);
}

.button.brown:active {
  background: #d2b33d;
  background-image: -webkit-linear-gradient(top, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
  background-image: -moz-linear-gradient(top, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
  background-image: -o-linear-gradient(top, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
  background-image: linear-gradient(to bottom, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
}

.button.brown:active:after {
  border-color: #d2b33d;
}

.column.pink {
  background: #b53686;
}

.button.pink {
  background: #b62b89;
  border-color: #801e61 #7c1d5e #63184b;
  background-image: -webkit-linear-gradient(top, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
  background-image: -moz-linear-gradient(top, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
  background-image: -o-linear-gradient(top, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
  background-image: linear-gradient(to bottom, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
}

.button.pink:before {
  background: #d83ca6;
  background-image: -webkit-linear-gradient(top, #9c2174, #df4aae);
  background-image: -moz-linear-gradient(top, #9c2174, #df4aae);
  background-image: -o-linear-gradient(top, #9c2174, #df4aae);
  background-image: linear-gradient(to bottom, #9c2174, #df4aae);
}

.button.pink:active {
  background: #cb3093;
  background-image: -webkit-linear-gradient(top, #941a77 0%, #c22e8d 60%, #cb3093 100%);
  background-image: -moz-linear-gradient(top, #941a77 0%, #c22e8d 60%, #cb3093 100%);
  background-image: -o-linear-gradient(top, #941a77 0%, #c22e8d 60%, #cb3093 100%);
  background-image: linear-gradient(to bottom, #941a77 0%, #c22e8d 60%, #cb3093 100%);
}

.button.pink:active:after {
  border-color: #cb3093;
}

.column.purple {
  background: #7351b7;
}

.button.purple {
  background: #6440be;
  border-color: #4a2f8c #482e89 #3c2672;
  background-image: -webkit-linear-gradient(top, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
  background-image: -moz-linear-gradient(top, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
  background-image: -o-linear-gradient(top, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
  background-image: linear-gradient(to bottom, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
}

.button.purple:before {
  background: #8161d0;
  background-image: -webkit-linear-gradient(top, #5534a7, #8c6ed8);
  background-image: -moz-linear-gradient(top, #5534a7, #8c6ed8);
  background-image: -o-linear-gradient(top, #5534a7, #8c6ed8);
  background-image: linear-gradient(to bottom, #5534a7, #8c6ed8);
}

.button.purple:active {
  background: #7753c5;
  background-image: -webkit-linear-gradient(top, #432ba0 0%, #714bc2 60%, #7753c5 100%);
  background-image: -moz-linear-gradient(top, #432ba0 0%, #714bc2 60%, #7753c5 100%);
  background-image: -o-linear-gradient(top, #432ba0 0%, #714bc2 60%, #7753c5 100%);
  background-image: linear-gradient(to bottom, #432ba0 0%, #714bc2 60%, #7753c5 100%);
}

.button.purple:active:after {
  border-color: #7753c5;
}

.column.gray {
  background: #9e9e9e;
}

.button.gray {
  background: #999999;
  border-color: #787878 #757575 #666666;
  background-image: -webkit-linear-gradient(top, #adadad 0%, #a6a6a6 50%, #999999 50%, #8e7b7c 100%);
  background-image: -moz-linear-gradient(top, #adadad 0%, #a6a6a6 50%, #999999 50%, #8e7b7c 100%);
  background-image: -o-linear-gradient(top, #adadad 0%, #a6a6a6 50%, #999999 50%, #8e7b7c 100%);
  background-image: linear-gradient(to bottom, #adadad 0%, #a6a6a6 50%, #999999 50%, #8e7b7c 100%);
}

.button.gray:before {
  background: #b6afaf;
  background-image: -webkit-linear-gradient(top, #8b8484, #c2b7b7);
  background-image: -moz-linear-gradient(top, #8b8484, #c2b7b7);
  background-image: -o-linear-gradient(top, #8b8484, #c2b7b7);
  background-image: linear-gradient(to bottom, #8b8484, #c2b7b7);
}

.button.gray:active {
  background: #a6a6a6;
  background-image: -webkit-linear-gradient(top, #8a7577 0%, #a1a1a1 60%, #a6a6a6 100%);
  background-image: -moz-linear-gradient(top, #8a7577 0%, #a1a1a1 60%, #a6a6a6 100%);
  background-image: -o-linear-gradient(top, #8a7577 0%, #a1a1a1 60%, #a6a6a6 100%);
  background-image: linear-gradient(to bottom, #8a7577 0%, #a1a1a1 60%, #a6a6a6 100%);
}

.button.gray:active:after {
  border-color: #a6a6a6;
}

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε

Προκειμένου να απαντήσετε πρέπει να είστε μέλος.

Δημιουργία Λογαριασμού

Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!


Δημιουργία ενός νέου Λογαριασμού

Σύνδεση

Έχετε ήδη έναν λογαριασμό; Κανένα πρόβλημα, συνδεθείτε εδώ.


Σύνδεση

 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης