Button

Eigene Button per CSS in das Zeta Projekt einzubinden gestaltet sich gar nicht so schwierig.

Button 1

CSS-Button 1

<style>

.button1 {

display: inline-block;

width: 220px;

padding: 8px;

color: #3D3D3D;

background-color: transparent;

border: 1px solid #3D3D3D;

box-shadow: inset 0 0 20px 4px rgba(61, 61, 61, 0.5);

text-align: center;

outline: none;

margin-top: 10px;

text-decoration: none;

transition: background-color 0.2s ease-out,

box-shadow 0.2s ease-out,

color 0.2s ease-out;

}

.button1:hover,

.button1:active {

background-color: transparent;

color: #F22929;

border: 1px solid #3D3D3D;

box-shadow: inset 0 0 20px 4px rgba(242, 41, 41, 0.5);

text-decoration: none;

transition: background-color 0.3s ease-in,

box-shadow 0.3s ease-in,

color 0.3s ease-in;

}

</style>

Button 2

CSS-Button 2

<style>

.button2 {

display: inline-block;

width: 220px;

padding: 8px;

color: #3D3D3D;

background-color: transparent;

border: 1px solid #3D3D3D;

text-align: center;

outline: none;

margin-top: 10px;

text-decoration: none;

transition: background-color 0.2s ease-out,

color 0.2s ease-out;

}

.button2:hover,

.button2:active {

background-color: #F22929;

color: #FFFFFF;

border: 1px solid #F22929;

text-decoration: none;

transition: background-color 0.3s ease-in,

color 0.3s ease-in;

}

</style>

Button 3

CSS-Button 3

<style>

.button3 {

display: inline-block;

width: 220px;

padding: 8px;

color: #3D3D3D;

border-radius: 0px;

background-color: transparent;

border: 1px solid #3D3D3D;

text-align: center;

outline: none;

margin-top: 10px;

text-decoration: none;

transition: background-color 0.2s ease-out,

border-radius 0.2s ease-out,

color 0.2s ease-out;

}

.button3:hover,

.button3:active {

background-color: #666666;

color: #FFFFFF;

border-radius: 15px;

border: 1px solid #3D3D3D;

text-decoration: none;

transition: background-color 0.3s ease-in,

border-radius 0.3s ease-in,

color 0.3s ease-in;

}

</style>

Button 4

CSS-Button 4

<style>

.button4 {

display: inline-block;

width: 220px;

padding: 8px;

color: #F22929;

background-color: transparent;

border: 1px solid #F22929;

border-radius: 35px 7px 7px 7px;

box-shadow: inset 0 0 20px 4px rgba(242, 41, 41, 0.5);

text-align: center;

outline: none;

margin-top: 10px;

text-decoration: none;

transition: background-color 0.2s ease-out,

box-shadow 0.2s ease-out,

border-radius 0.2s ease-out,

color 0.2s ease-out;

}

.button4:hover,

.button4:active {

background-color: transparent;

color: #F22929;

border: 1px solid #F22929;

border-radius: 7px 7px 35px 7px;

box-shadow: inset 0 0 20px 4px rgba(242, 41, 41, 0.5);

text-decoration: none;

transition: background-color 0.3s ease-in,

box-shadow 0.3s ease-in,

border-radius 0.3s ease-in,

color 0.3s ease-in;

}

</style>

Button 5

CSS-Button 5

<style>

.button5 {

display: inline-block;

font-size: 1em;

width: 220px;

height: 25px;

padding: 8px;

color: #F22929;

background-color: transparent;

border: 1px solid #F22929;

border-radius: 7px 7px 7px 7px;

box-shadow: inset 0 0 20px 4px rgba(242, 41, 41, 0.5);

text-align: center;

outline: none;

margin-top: 10px;

text-decoration: none;

transition: all 0.1s ease-out;

}

.button5:hover,

.button5:active {

width: 260px;

height: 35px;

font-size: 1.5em;

background-color: transparent;

color: #F22929;

border: 1px solid #F22929;

border-radius: 7px 7px 7px 7px;

box-shadow: inset 0 0 20px 4px rgba(242, 41, 41, 0.5);

transform: translate(0px, -10px);

text-decoration: none;

transition: all 0.2s ease-in;

}

</style>

Button 6

CSS-Button 6

<style>

.button6 {

display: inline-block;

font-size: 1.5em;

width: 250px;

height: 40px;

padding: 8px;

color: #F22929;

background-color: #F9FE01;

border-radius: 50%;

border: 35px double #f22929;

text-align: center;

outline: none;

margin-top: 10px;

text-decoration: none;

transition: all 0.3s ease-out;

}

.button6:hover,

.button6:active {

color: #F9FE01;

border: 35px double #F9FE01;

width: 300px;

height: 50px;

font-size: 2em;

background-color: #f22929;

text-decoration: none;

transition: all 0.4s ease-in;

}

</style>

Button 7

CSS-Button 7

<style>


.button7 {
display: inline-block;
width: 220px;
padding: 8px;
color: #ffffff;
text-align: center;
border-radius: 35px 5px 35px 5px;
background-color: #7EC244;
box-shadow: 0 5px 5px #518631, 0 9px 0 #395F26, 0 9px 10px 
rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 
0, 0, 0.2) inset;
}
.button7:hover {
color: #ffffff;
box-shadow: 0 5px 5px #518631, 0 9px 0 #395F26, 0 9px 10px 
rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px 
rgba(0, 0, 0, 0.2) inset;
}
.button7:active {
box-shadow: 0 2px 0 #395F26, 0 4px 4px rgba(0, 0, 0, 0.4), 
0 2px 5px rgba(0, 0, 0, 0.2) inset;
}
</style>

Unter Einstellungen > CSS fügt ihr den CSS-Code des entsprechenden Button ein.

Dort wo der Button erscheinen soll fügt ihr einen einfachen Text-Artikel ein. In dem Widget schaltet ihr auf HTML um und fügt unten stehenden Code ein. Nun den Text ändern und die entsprechende Klasse angeben (button1, button2...). Anschließend HTML wieder ausschalten. Nun könnt ihr den Button ganz einfach verlinken oder die Ausrichtung änden.

<p style="text-align: right"><a class="button1" href="button.html">Button 1</a><br><br></p>

Button

NEUE BEITRÄGE