Skip to content

Instantly share code, notes, and snippets.

@jemc

jemc/BigButton.qml

Last active August 5, 2023 09:26
Show Gist options
  • Save jemc/98fc37102a9618a57272 to your computer and use it in GitHub Desktop.
Save jemc/98fc37102a9618a57272 to your computer and use it in GitHub Desktop.
Download ZIP
Big Button example in QML using SVG and native layers
Raw
BigButton.qml
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
import QtGraphicalEffects 1.0
Item {
height: 200
width: 200
property var baseColor: "#112244"
Button {
anchors.fill:parent
style: ButtonStyle {
background: Rectangle {
id: background
anchors.fill: parent
radius: height/5
gradient: Gradient {
GradientStop { position: 1.00; color: Qt.lighter(baseColor, 0.6) }
GradientStop { position: 0.80; color: Qt.lighter(baseColor, 0.5) }
GradientStop { position: 0.00; color: Qt.lighter(baseColor, 0.1) }
}
Rectangle {
id: innerBackground
anchors.fill: parent
anchors.margins: parent.height/20
radius: height/5.5 // This ratio matches the iconmonstr icon style radius
gradient: Gradient {
GradientStop { position: control.pressed ? 0 : 1; color: Qt.lighter(baseColor, 0.8) }
GradientStop { position: 0.66; color: Qt.lighter(baseColor, 1.0) }
GradientStop { position: control.pressed ? 1 : 0; color: Qt.lighter(baseColor, 1.2) }
}
}
Rectangle {
id: iconFill
visible: false
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.00; color: "#ABCDEF" }
GradientStop { position: 0.33; color: "#789ABC" }
GradientStop { position: 1.00; color: control.pressed ? "#349A78" : "#345678" }
}
}
Image {
id: icon
visible: false
anchors.fill: iconFill
source: "./svg/iconmonstr-gear-10-icon.svg"
}
OpacityMask {
anchors.fill: iconFill
source: iconFill
maskSource: icon
}
Canvas {
id: highlight
anchors.fill: innerBackground
contextType: "2d"
onPaint: {
var radius = anchors.fill.radius
var gradient = context.createLinearGradient(0, 0, 0, height)
gradient.addColorStop(0.0, Qt.rgba(1, 1, 1, 0))
gradient.addColorStop(0.4, Qt.rgba(1, 1, 1, 1))
context.roundedRect(0, 0, width, height, radius, radius)
context.clip()
context.beginPath()
context.arc(width/2, -width*0.85, width*1.2, 0, 3.14*2, false)
context.fillStyle = gradient
context.fill()
}
opacity: control.pressed ? 0.1 : 0.2
}
}
}
}
}
Display the source blob
Display the rendered blob
Raw
iconmonstr-gear-10-icon.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated.
You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="gear-10-icon" d="M333.813,227.612V189.39l-20.652-7.344c-7.875-2.799-14.211-8.814-17.41-16.535
c-0.002-0.002-0.004-0.006-0.004-0.01c-3.211-7.738-2.986-16.475,0.609-24.041l9.408-19.789l-27.029-27.027l-19.783,9.404
c-7.562,3.596-16.312,3.822-24.047,0.615c-0.004-0.004-0.008-0.004-0.01-0.004c-7.727-3.203-13.73-9.531-16.533-17.412
l-7.344-20.654h-38.223l-7.346,20.654c-2.801,7.873-8.812,14.211-16.532,17.412c-0.002,0-0.006,0.002-0.01,0.004
c-7.74,3.209-16.477,2.984-24.045-0.613l-19.785-9.406l-27.029,27.027l9.406,19.785c3.596,7.562,3.82,16.312,0.613,24.049
c-0.002,0.002-0.002,0.004-0.006,0.01c-3.201,7.723-9.529,13.729-17.408,16.531L50,189.39v38.223l20.654,7.344
c7.873,2.801,14.209,8.814,17.41,16.533c0.002,0.004,0.002,0.008,0.004,0.01c3.209,7.74,2.984,16.477-0.611,24.045l-9.408,19.787
l27.029,27.025l19.785-9.402c7.562-3.596,16.312-3.82,24.049-0.613c0.002,0.002,0.006,0.004,0.008,0.004
c7.724,3.203,13.728,9.527,16.53,17.408l7.346,20.652h38.223l7.299-20.52c2.824-7.947,8.891-14.344,16.678-17.582
c0.004-0.002,0.008-0.002,0.012-0.004c7.666-3.189,16.32-2.969,23.818,0.594l19.91,9.463l27.029-27.025l-9.412-19.799
c-3.592-7.555-3.814-16.295-0.609-24.023c0.002-0.004,0.004-0.006,0.004-0.01c3.207-7.732,9.539-13.742,17.426-16.547
L333.813,227.612z M191.907,260.542c-28.742,0-52.042-23.301-52.042-52.041c0-28.742,23.3-52.043,52.042-52.043
c28.74,0,52.041,23.301,52.041,52.043C243.948,237.241,220.647,260.542,191.907,260.542z M462,339.991v-20.32l-10.979-3.902
c-4.188-1.488-7.557-4.688-9.258-8.791c-0.002,0-0.002-0.002-0.002-0.004c-1.707-4.115-1.586-8.76,0.326-12.783l5-10.52
l-14.369-14.367l-10.518,5c-4.02,1.91-8.67,2.031-12.783,0.326c-0.002,0-0.004,0-0.006,0c-4.105-1.705-7.299-5.068-8.787-9.258
l-3.904-10.98H376.4l-3.904,10.98c-1.49,4.186-4.686,7.555-8.789,9.258c-0.002,0-0.004,0-0.006,0
c-4.112,1.705-8.757,1.586-12.78-0.326l-10.52-5l-14.369,14.367l5.002,10.52c1.91,4.02,2.029,8.672,0.324,12.783
c0,0.002,0,0.004-0.002,0.006c-1.701,4.107-5.066,7.299-9.254,8.789l-10.98,3.902v20.32l10.98,3.902
c4.186,1.488,7.555,4.684,9.254,8.789c0.002,0.002,0.002,0.004,0.002,0.006c1.707,4.113,1.588,8.758-0.324,12.781l-5.002,10.52
l14.369,14.367l10.52-4.998c4.02-1.912,8.67-2.031,12.782-0.326c0.002,0,0.002,0.002,0.004,0.002
c4.107,1.701,7.297,5.064,8.789,9.252l3.904,10.982h20.32l3.879-10.91c1.502-4.225,4.727-7.625,8.867-9.348
c0.002,0,0.004-0.002,0.006-0.002c4.074-1.695,8.676-1.578,12.662,0.316l10.584,5.031l14.369-14.367l-5.002-10.525
c-1.91-4.018-2.029-8.664-0.326-12.771c0-0.002,0.002-0.004,0.002-0.004c1.707-4.111,5.072-7.307,9.264-8.799L462,339.991z
M386.561,357.495c-15.279,0-27.665-12.387-27.665-27.664c0-15.279,12.386-27.666,27.665-27.666s27.666,12.387,27.666,27.666
C414.227,345.108,401.84,357.495,386.561,357.495z M315.284,399.813v-11.139l-7.753-1.939c-1.605-0.402-2.873-1.646-3.3-3.246
c-0.002-0.008-0.005-0.018-0.007-0.025c-0.423-1.576,0.045-3.26,1.218-4.393l5.771-5.584l-5.57-9.646l-7.647,2.186
c-1.618,0.463-3.367,0.012-4.558-1.176c-0.001-0.002-0.002-0.002-0.002-0.004c-1.141-1.137-1.574-2.805-1.132-4.354l2.221-7.771
l-9.646-5.57l-5.556,5.744c-1.15,1.188-2.857,1.664-4.454,1.236c-0.009,0-0.017-0.004-0.024-0.006
c-1.58-0.42-2.807-1.666-3.204-3.254l-1.948-7.789h-11.139l-1.941,7.752c-0.401,1.605-1.646,2.873-3.246,3.301
c-0.008,0.002-0.018,0.004-0.025,0.006c-1.576,0.424-3.258-0.045-4.393-1.217l-5.584-5.773l-9.646,5.57l2.186,7.648
c0.463,1.617,0.012,3.367-1.176,4.559c-0.001,0-0.002,0.002-0.003,0.002c-1.138,1.141-2.805,1.574-4.354,1.131l-7.772-2.221
l-5.568,9.646l5.744,5.555c1.187,1.15,1.662,2.859,1.236,4.455c-0.002,0.008-0.006,0.018-0.007,0.025
c-0.42,1.58-1.667,2.807-3.254,3.203l-7.79,1.949v11.139l7.753,1.939c1.606,0.402,2.873,1.648,3.3,3.246
c0.003,0.01,0.005,0.02,0.006,0.027c0.424,1.576-0.044,3.258-1.217,4.393l-5.771,5.584l5.568,9.646l7.648-2.188
c1.618-0.461,3.367-0.012,4.559,1.176c0.001,0.002,0.002,0.004,0.004,0.004c1.14,1.137,1.572,2.807,1.13,4.354l-2.222,7.773
l9.646,5.568l5.556-5.744c1.149-1.188,2.858-1.662,4.454-1.236c0.009,0.002,0.018,0.004,0.026,0.006
c1.579,0.42,2.806,1.668,3.203,3.254l1.95,7.791h11.139l1.939-7.754c0.402-1.605,1.646-2.873,3.247-3.299
c0.007-0.004,0.016-0.006,0.024-0.008c1.576-0.422,3.258,0.045,4.393,1.219l5.583,5.771l9.646-5.568l-2.186-7.65
c-0.462-1.617-0.011-3.367,1.177-4.557c0.001-0.002,0.002-0.002,0.003-0.004c1.138-1.141,2.806-1.572,4.354-1.131l7.77,2.223
l5.57-9.646l-5.744-5.557c-1.187-1.15-1.662-2.857-1.236-4.455c0.002-0.008,0.006-0.016,0.007-0.025
c0.421-1.58,1.668-2.805,3.254-3.203L315.284,399.813z M264.122,414.323c-11.089,0-20.078-8.99-20.078-20.08
c0-11.088,8.989-20.078,20.078-20.078c11.09,0,20.078,8.99,20.078,20.078C284.2,405.333,275.212,414.323,264.122,414.323z"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment