Button SVG Theme

SVG Button Theme

A SVG file is used as a template to customize buttons. You can either create your own svg design and use it as a button or use images for button states. This file is only useful as button 'skin', the behaviour of your button should never be altered by it.

Structure

This file is ordered in multiple group tags, the button will switch between those groups in order to display the button's different states. You can design any svg shape in the groups in order to draw your button the way you like. the data attributes will help you mix the css with your svg element if needed, we will explain it in detail in the example.

Attributes and properties

  • <svg> tag :
- viewBox (mandatory), defines the part of your svg you want displayed in your button.
- data-customimagestyle, defines defines the style of your image inside the SVG.
- data-customimagestyle-notext, same as above, but takes pace when no text is defined in your button
- data-globalbuttonstyle, defines the overall style of your button, if you need your button to have a border this is the right place to write it
  • <g> tags :
- each <g> tag is a svg group, it requires a globally unique id and a bpa-state value, the button currently needs each 4 states defined, values for bpa-state can be default, hover, disabled and active
- data-custombuttonstyle defines the style of the button during a specific state. For instance you can change the color of a border on hover using this attribute.
- data-textstyle defines the style of the text during a specific state similarly to custombuttonstyle described above.
- data-imgstatestyle defines the style of the image during a specific state similarly to custombuttonstyle described above.
- inside the <g> tag can be anything a SVG accepts, svg shapes can work as well as base64 objects.
  • The <use> tag is optionnal, it can help you preview your SVG while designing it.

Example

 <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style=""
    data-customimagestyle="margin: 3%;
                         max-width: 25%;
                        height: auto;
                        width:auto;"

    data-customimagestyle-notext="margin: 3%;
                         max-width: 80%;
                        height: auto;
                        width:auto;"

    data-globalbuttonstyle= "overflow: hidden;
                        border: solid;
                        border-width: 1px;
                        border-radius: 4px;
                        cursor: pointer;"

    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- This tag will contain the svg and css of the default button state, we informed in the global styles that we wanted a border, now we will input what we want inside it or how we want to fill it. -->
        <g id="f4d95ae4e2c5dd5e735cefb6a8cd2517" bpa-state="default"
             data-custombuttonstyle="border-color: #d3d3d3;"
             data-textstyle="opacity: 1;"
             data-imgstatestyle="filter: opacity(1);">
            <!-- We want to fill our state with a gradient, in order to do that we will first draw a gradient and describe which color will change, when to stop them and to offset them, the two points we define are describing the direction of our gradient. -->
            <linearGradient id="gradDefault" x1="0" y1="50%" x2="0" y2="100%">
                <stop offset="0" style="stop-color:#EEE;stop-opacity:1" />
                <stop offset="0" style="stop-color:#EEE;stop-opacity:1" />
                <stop offset="0" style="stop-color:#e6e6e6;stop-opacity:1" />
                <stop offset="25%" style="stop-color:#EEE;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#f2f2f2;stop-opacity:1" />
            </linearGradient>
            <!--  We then draw a rectangle taking the whole displayed size and we fill it with the gradient we defined earlier.We could also use any tool a svg gives us to fill inside our css border. -->
            <rect width="100" height="100" style="fill:url(#gradDefault);" />
        </g>

        <g id="158b46520ab05f3314597d0c47768008" bpa-state="hover"
            data-custombuttonstyle= "border-color: #999;"
            data-textstyle="opacity: 1;"
            data-imgstatestyle="filter: opacity(1);">

            <linearGradient id="gradHover" x1="0" y1="50%" x2="0" y2="100%">
                <stop offset="0" style="stop-color:#e5e5e5;stop-opacity:1" />
                <stop offset="0" style="stop-color:#e5e5e5;stop-opacity:1" />
                <stop offset="0" style="stop-color:#dadada;stop-opacity:1" />
                <stop offset="25%" style="stop-color:#e5e5e5;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ebebeb;stop-opacity:1" />
            </linearGradient>

            <rect width="100" height="100" style="fill:url(#gradHover);" />
        </g>

        <g id="9252b0e3f2a6fc50268ccca7d444c86f" bpa-state="disabled"
            data-custombuttonstyle= "border-color: #f0f0f0;
                        cursor: not-allowed;"
                        data-textstyle="opacity: 0.5;"
                        data-imgstatestyle="filter: opacity(0.5);">

            <rect width="100" height="100" style="fill:#f6f6f6;" />
        </g>

        <g id="501d4ddb1e52b30bdbc2b7889d71f2c1" bpa-state="active"
            data-custombuttonstyle= "border-color : #6497e9;"
            data-textstyle="opacity: 1;"
            data-imgstatestyle= "filter: opacity(1);">

            <rect width="100" height="100" style="fill:#fff;" />
        </g>

    </defs>
    <use xlink:href="#f4d95ae4e2c5dd5e735cefb6a8cd2517"></use>
</svg>
[$[Get Code]]