How To Create a PayPal-styled Button Using CSS and HTML

Author: erics, August 31st, 2018

<button class="paypal-btn large" onclick="window.location='https://www.yoursite.com/targetPage/';return false">What a Great Button</button>

1	<button class="paypal-btn large" onclick="window.location='https://www.yoursite.com/targetPage/';return false">What a Great Button</button>

button.paypal-btn {
 white-space: nowrap;
}
button.paypal-btn {
 white-space: nowrap;
 overflow: hidden;
 border-radius: 13px;
 font-family: "Arial", bold, italic;
 font-weight: bold;
 font-style: italic;
 border: 1px solid #ffa823;
 color: #0E3168;
 background: #ffa823;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 cursor: pointer;
 z-index: 0;
}
button.paypal-btn:before {
 content: " ";
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 11px;
 top: 0;
 left: 0;
 background: #ffa823;
 background: -webkit-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 background: -moz-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 background: -ms-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 background: linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);
 z-index: -2;
}
button.paypal-btn:after {
 content: " ";
 position: absolute;
 width: 98%;
 height: 60%;
 border-radius: 40px 40px 38px 38px;
 top: 0;
 left: 0;
 background: -webkit-linear-gradient(top, #fefefe 0%, #fed994 100%);
 background: -moz-linear-gradient(top, #fefefe 0%, #fed994 100%);
 background: -ms-linear-gradient(top, #fefefe 0%, #fed994 100%);
 background: linear-gradient(top, #fefefe 0%, #fed994 100%);
 z-index: -1;
 -webkit-transform: translateX(1%);
 -moz-transform: translateX(1%);
 -ms-transform: translateX(1%);
 transform: translateX(1%);
}
button.paypal-btn.small {
 padding: 3px 15px;
 font-size: 12px;
}
button.paypal-btn.large {
 padding: 4px 19px;
 font-size: 14px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

button.paypal-btn {

white-space: nowrap;

}

button.paypal-btn {

white-space: nowrap;

overflow: hidden;

border-radius: 13px;

font-family: "Arial", bold, italic;

font-weight: bold;

font-style: italic;

border: 1px solid #ffa823;

color: #0E3168;

background: #ffa823;

position: relative;

text-shadow: 0 1px 0 rgba(255,255,255,.5);

cursor: pointer;

z-index: 0;

}

button.paypal-btn:before {

content: " ";

position: absolute;

width: 100%;

height: 100%;

border-radius: 11px;

top: 0;

left: 0;

background: #ffa823;

background: -webkit-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

background: -moz-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

background: -ms-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

background: linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%);

z-index: -2;

}

button.paypal-btn:after {

content: " ";

position: absolute;

width: 98%;

height: 60%;

border-radius: 40px 40px 38px 38px;

top: 0;

left: 0;

background: -webkit-linear-gradient(top, #fefefe 0%, #fed994 100%);

background: -moz-linear-gradient(top, #fefefe 0%, #fed994 100%);

background: -ms-linear-gradient(top, #fefefe 0%, #fed994 100%);

background: linear-gradient(top, #fefefe 0%, #fed994 100%);

z-index: -1;

-webkit-transform: translateX(1%);

-moz-transform: translateX(1%);

-ms-transform: translateX(1%);

transform: translateX(1%);

}

button.paypal-btn.small {

padding: 3px 15px;

font-size: 12px;

}

button.paypal-btn.large {

padding: 4px 19px;

font-size: 14px;

}

Categories: How-To's, Technology Tags: Button, Class, Create, CSS, howto, html, onclick, PayPal, style, tips | No comments

How To Count Selected Checkboxes Using jQuery

Author: erics, March 3rd, 2012

Just be sure to add the class “yourClass” to each checkbox in the group you wish to count and it is as simple as:

alert( 'Qty checked: ' + jQuery('.yourClass:checked').length );

1	alert( 'Qty checked: ' + jQuery('.yourClass:checked').length );

Categories: How-To's, Technology Tags: CheckBox, Checkboxes, Checked, Class, Count, howto, JQuery, Length, Qty, selected, tips | No comments

How To Pass A Reference To An Existing Object From One Class To Another In PHP

Author: erics, February 2nd, 2012

Inside class “yourClassA” calling “yourClassB”:

class yourClassA {
        $classObject  = new yourClassB;
        $classObject->setClass($this);
}

1

2

3

4

class yourClassA {

$classObject = new yourClassB;

$classObject->setClass($this);

}

Inside class “yourClassB” getting the call from “yourClassA”:

class yourClassB {

    public function setClass($object = NULL) {
        if(is_object($object) and $object instanceof yourClassA) {
            $this->RefToClassA = $object;
            $this->yourVar  = $RefToClassA->otherVar; // etc, etc, etc...
        }
    }

}

1

2

3

4

5

6

7

8

9

10

class yourClassB {

public function setClass($object = NULL) {

if(is_object($object) and $object instanceof yourClassA) {

$this->RefToClassA = $object;

$this->yourVar = $RefToClassA->otherVar; // etc, etc, etc...

}

Categories: How-To's, Technology Tags: Class, Classes, Function, Object, Object Oriented, OO, php, Reference, Var, Variable | No comments

How To Find The Next Instance Of A Class Using jQuery

Author: erics, June 20th, 2011

var Obj = jQuery(this).parent().nextAll('.myClass:first');

1	var Obj = jQuery(this).parent().nextAll('.myClass:first');

Categories: How-To's, Technology Tags: Class, Find, howto, javascript, JQuery, JS, Next, NextAll, tips | No comments

How To Create a PayPal-styled Button Using CSS and HTML

How To Count Selected Checkboxes Using jQuery

How To Pass A Reference To An Existing Object From One Class To Another In PHP

How To Find The Next Instance Of A Class Using jQuery

Our Link Network

Business

Client Websites

Fine Dining

Friends & Family

Galleries

Health

Resources

Technology

Travel

The Archives

Latest Ramblings…

Various Topics of No Interest