Various modifications for phpBB3Let make square buttons round with effects

Snippets for phpBB3
Previous topicNext topic
User avatar

Topic Author
dmzx
Founder
Founder
Magic user status: Offline
Posts: 5971
Joined: Jan 13th, '14, 20:45
    unknown unknown

Let make square buttons round with effects

Post by dmzx »

Let make square button round (this has prosilver colours) you can tweak all if it to suit your style.

Open styles/prosilver/theme/stylesheet.css

add this to he bottom of the file.

Code: Select all

    /** Default button state **/
    input.button1, input.button2 {
       margin:0px 0;
       padding: 1px 5px;
       white-space: nowrap;
       vertical-align: middle;
       line-height: middle;
       font: bold 11px Sans-Serif;
       color: #000000;
       background: transparent none 0 0 no-repeat;
       -webkit-transition:all 250ms linear;
       -moz-transition:all 250ms linear;
       -o-transition:all 250ms linear;
       -webkit-appearance: none; /* stop mobile safari from using default button styles */
       border: 1px solid #12A2EA;
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px;
       border-radius: 6px;
       -webkit-box-shadow: 0 1px 1px #fff;
       -moz-box-shadow:    0 1px 1px #fff;
       box-shadow:      0 1px 1px #000000;
       text-shadow: 0 0px 0px white;
       background: #eee;
       cursor: pointer;
       }

    /** Hover button state **/
    input.button1:hover, input.button2:hover {

       border-color: #BC2A4D;
       background: transparent none 0 0 no-repeat;
       -webkit-transition:all 250ms linear;
       -moz-transition:all 250ms linear;
       -o-transition:all 250ms linear;
       background: #dbdbdb; /* Old browsers */
       background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e0e0e0));
       background: -webkit-linear-gradient(top, white, #e0e0e0);
       background:    -moz-linear-gradient(top, white, #e0e0e0);
       background:     -ms-linear-gradient(top, white, #e0e0e0);
       background:   -o-linear-gradient(top, white, #e0e0e0);
       background:      linear-gradient(top, white, #e0e0e0);
       -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
       -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
       box-shadow:      0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
       }

    /** Active button state **/
    input.button1:active, input.button2:active {

       border: 1px solid #000000;
       border-bottom-color: #ccc;
       border-top-color: #999;
       background: transparent none 0 0 no-repeat;
       -webkit-transition:all 250ms linear;
       -moz-transition:all 250ms linear;
       -o-transition:all 250ms linear;
       -webkit-box-shadow: inset 0 1px 2px #aaa;
       -moz-box-shadow:    inset 0 1px 2px #aaa;
       box-shadow:      inset 0 1px 2px #aaa;
       background: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#dcdcdc));
       background: -webkit-linear-gradient(top, #e6e6e6, gainsboro);
       background:    -moz-linear-gradient(top, #e6e6e6, gainsboro);
       background:     -ms-linear-gradient(top, #e6e6e6, gainsboro);
       background:   -o-linear-gradient(top, #e6e6e6, gainsboro);
       background:      linear-gradient(top, #e6e6e6, gainsboro);
       }

    input.button2 {
       color:#000000;
       background: transparent none 0 0 no-repeat;
       -webkit-transition:all 250ms linear;
      }
of:

Code: Select all

    /** Default button state **/
       input.button1, input.button2 {
          margin:0px 0;
          padding: 1px 5px;
          white-space: nowrap;
          vertical-align: middle;
          line-height: normal;
          font: bold 11px Sans-Serif;
          color: #000;
          -webkit-appearance: none; /* stop mobile safari from using default button styles */
          border: 1px solid #109FE6;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          -webkit-box-shadow: 0 1px 1px #fff;
          -moz-box-shadow:    0 1px 1px #fff;
          box-shadow:         0 1px 1px #fff;
          text-shadow: 0 1px 1px white;
          background: #eee;
          cursor: pointer;
       }
       
       /** Hover button state **/
       input.button1:hover, input.button2:hover {
          color: #111;
          border-color: #000;
          background: #dbdbdb; /* Old browsers */
          background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e0e0e0));
          background: -webkit-linear-gradient(top, white, #e0e0e0);
          background:    -moz-linear-gradient(top, white, #e0e0e0);
          background:     -ms-linear-gradient(top, white, #e0e0e0);
          background:      -o-linear-gradient(top, white, #e0e0e0);
          background:         linear-gradient(top, white, #e0e0e0);
          -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
          -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
          box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
       }
       
       /** Active button state **/
       input.button1:active, input.button2:active {
          border: 1px solid #aaa;
          border-bottom-color: #ccc;
          border-top-color: #999;
          -webkit-box-shadow: inset 0 1px 2px #aaa;
          -moz-box-shadow:    inset 0 1px 2px #aaa;
          box-shadow:         inset 0 1px 2px #aaa;
          background: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#dcdcdc));
          background: -webkit-linear-gradient(top, #e6e6e6, gainsboro);
          background:    -moz-linear-gradient(top, #e6e6e6, gainsboro);
          background:     -ms-linear-gradient(top, #e6e6e6, gainsboro);
          background:      -o-linear-gradient(top, #e6e6e6, gainsboro);
          background:         linear-gradient(top, #e6e6e6, gainsboro);
       }
       
       input.button2 {
          color:#000;
       }
of:

Code: Select all

    /** Default button state **/
       input.button1, input.button2 {
          margin:0px 0;
          padding: 1px 5px;
          white-space: nowrap;
          vertical-align: middle;
          line-height: normal;
          font: bold 11px Sans-Serif;
          color: #BC2A4D;
          -webkit-appearance: none; /* stop mobile safari from using default button styles */
          border: 1px solid #109FE6;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          -webkit-box-shadow: 0 1px 1px #fff;
          -moz-box-shadow:    0 1px 1px #fff;
          box-shadow:         0 1px 1px #fff;
          text-shadow: 0 1px 1px white;
          background: #dbdbdb;
          cursor: pointer;
       }
       
       /** Hover button state **/
       input.button1:hover, input.button2:hover {
          color: #BC2A4D;
          border-color: #fff;
          background: #dbdbdb; /* Old browsers */
          background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e0e0e0));
          background: -webkit-linear-gradient(top, white, #e0e0e0);
          background:    -moz-linear-gradient(top, white, #e0e0e0);
          background:     -ms-linear-gradient(top, white, #e0e0e0);
          background:      -o-linear-gradient(top, white, #e0e0e0);
          background:         linear-gradient(top, white, #e0e0e0);
          -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
          -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
          box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
       }
       
       /** Active button state **/
       input.button1:active, input.button2:active {
          border: 1px solid #aaa;
          border-bottom-color: #ccc;
          border-top-color: #999;
          -webkit-box-shadow: inset 0 1px 2px #aaa;
          -moz-box-shadow:    inset 0 1px 2px #aaa;
          box-shadow:         inset 0 1px 2px #aaa;
          background: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#dcdcdc));
          background: -webkit-linear-gradient(top, #e6e6e6, gainsboro);
          background:    -moz-linear-gradient(top, #e6e6e6, gainsboro);
          background:     -ms-linear-gradient(top, #e6e6e6, gainsboro);
          background:      -o-linear-gradient(top, #e6e6e6, gainsboro);
          background:         linear-gradient(top, #e6e6e6, gainsboro);
       }
       
       input.button2 {
          color:#BC2A4D;
       }
of:

Code: Select all

/** Default button state **/
           input.button1, input.button2 {
              margin:0px 0;
              padding: 1px 5px;
              white-space: nowrap;
              vertical-align: middle;
              line-height: normal;
              font: bold 11px Sans-Serif;
              color: #BC2A4D;
              -webkit-appearance: none; /* stop mobile safari from using default button styles */
              border: 1px solid #00F200;
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
              border-radius: 3px;
              -webkit-box-shadow: 0 1px 1px #1A1A1A;
              -moz-box-shadow:    0 1px 1px #1A1A1A;
              box-shadow:         0 1px 1px #1A1A1A;
              text-shadow: 0 0px 0px #1A1A1A;
              background: #A1A1A1;
              cursor: pointer;
           }
           
           /** Hover button state **/
           input.button1:hover, input.button2:hover {
              color: #FF0000;
              border: 1px solid #FF0000;
              background: #dbdbdb; /* Old browsers */
              background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e0e0e0));
              background: -webkit-linear-gradient(top, white, #e0e0e0);
              background:    -moz-linear-gradient(top, white, #e0e0e0);
              background:     -ms-linear-gradient(top, white, #e0e0e0);
              background:      -o-linear-gradient(top, white, #e0e0e0);
              background:         linear-gradient(top, white, #e0e0e0);
              -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #A1A1A1;
              -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #A1A1A1;
              box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #A1A1A1;
           }
           
           /** Active button state **/
           input.button1:active, input.button2:active {
              border: 1px solid #00F200;
              border-bottom-color: #00F200;
              border-top-color: #00F200;
              -webkit-box-shadow: inset 0 1px 2px #A1A1A1;
              -moz-box-shadow:    inset 0 1px 2px #A1A1A1;
              box-shadow:         inset 0 1px 2px #A1A1A1;
              background: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#dcdcdc));
              background: -webkit-linear-gradient(top, #e6e6e6, gainsboro);
              background:    -moz-linear-gradient(top, #e6e6e6, gainsboro);
              background:     -ms-linear-gradient(top, #e6e6e6, gainsboro);
              background:      -o-linear-gradient(top, #e6e6e6, gainsboro);
              background:         linear-gradient(top, #e6e6e6, gainsboro);
           }
           
           input.button2 {
              color:#FF0000;
           }
binance.com ;) try it!
Previous topicNext topic